使用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协议的服务器上才能正常工作