使用jQuery处理Ajax
使用jQuery处理Ajax
HTTP协议
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议
设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法
所有的WWW文件都必须遵守这个标准
一次HTTP操作称为一个事务，其工作过程可分为四步
HTTP协议-请求方法
| 方法 | 说明 |
|---|---|
| OPTIONS | 返回服务器针对特定资源所支持的HTTP请求方法 |
| HEAD | 向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回 |
| GET | 向特定的资源发出请求 |
| POST | 向指定资源提交数据进行处理请求 |
| PUT | 向指定资源位置上传其最新内容 |
| DELETE | 请求服务器删除Request-URI所标识的资源 |
| TRACE | 回显服务器收到的请求，主要用于测试或诊断 |
| CONNECT | HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器 |
| PATCH | 实体中包含一个表，表中说明与该URI所表示的原内容的区别 |
HTTP协议-GET和POST区别
| GET | POST | |
|---|---|---|
| 缓存 | 能被缓存 | 不能缓存 |
| 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码 |
| 历史 | 参数保留在浏览器历史中 | 参数不会保存在浏览器历史中 |
| 对数据长度的限制 | 当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符） | 无限制 |
| 对数据类型的限制 | 只允许 ASCII 字符 | 没有限制，也允许二进制数据 |
| 安全性 | 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分 | POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中 |
| 可见性 | 数据在 URL 中对所有人都是可见的 | 数据不会显示在 URL 中 |
Ajax概念
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
原生创建Ajax的步骤
创建Ajax对象
连接到服务器
发送请求
接收返回值
创建Ajax对象
非IE6语法：var oAjax=new XMLHttpRequest();
老版本IE5 和 IE6语法：varoAjax=newActiveXObject(“Microsoft.XMLHTT”)
if (window.XMLHttpRequest){
var oAjax=new XMLHttpRequest();// IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
}else{var oAjax=new ActiveXObject("Microsoft.XMLHTTP");// IE6, IE5 浏览器执行代码 }
连接到服务器
open(方法，文件名，同步异步)
参数一：post/get
参数二：请求的文件名
参数三：同步（false） 异步（true）
oAjax.open("GET","abc.txt",true);
发送请求
send()
oAjax.send();
接收返回值
oAjax.onreadystatechange=function(){
if (oAjax.readyState==4 && oAjax.status==200){
alert("请求成功"+oAjax.responseText);
}
else{
alert("请求失败"+oAjax.status);
}
}
使用jQuery处理Ajax
$.ajax() 方法
通过 HTTP 请求加载远程数据
jQuery.ajax([settings])
setting:可选。用于配置 Ajax 请求的键值对集合
$("#b01").click(function(){
htmlobj=$.ajax({url:"/jquery/test1.txt",async:false});
$("#myDiv").html(htmlobj.responseText);
});
$.ajax() 方法-参数
$().load()方法
从服务器加载数据，并把返回的数据放入被选元素中
$(selector).load(URL,data,callback);
URL:必需参数，路径
data:可选参数，与请求一同发送的查询字符串键/值对集合
callback:可选参数，load() 方法完成后所执行的函数名称
$.get() 方法
通过 HTTP GET 请求从服务器上请求数据
$.get(URL,callback);
URL:必需参数，路径
callback:可选参数，请求成功后所执行的函数名
$.post() 方法
通过 HTTP POST 请求从服务器上请求数据
$.post(URL,data,callback);
URL:必需参数，路径
data:可选参数，连同请求发送的数据
callback:可选参数，请求成功后所执行的函数名
什么是跨域
跨域，指的是浏览器不能执行其他网站的脚本
例子：比如在网站中使用ajax请求其他网站的天气、快递或者其他数据接口
产生跨域的原因
由浏览器的同源策略造成的===>同域名，同端口，同协议
跨域解决方案1
CORS跨域资源共享
服务端：header(“Access-Control-Allow-Origin:*”);
“*”表示所有的域都可以接受
缺点
ie10以下不支持（可以用XDR实现）
跨域解决方案2
jsonp
动态创建script标签，使用jQuery的jsonp请求
优点
兼容性强&不受同源策略的限制
缺点
只能用get方法，不能使用post方法
跨域解决方案3
基于iframe实现跨域
在两个页面中同时添加document.domain
跨域解决方案4
web sockets
缺点
只有在支持web sockets协议的服务器上才能正常工作