ajax的工作原理
Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。要清楚这个过程和原理,我们必须对XMLHttpRequest有所了解。
XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
jQuery框架中$.ajax()的常用参数
type
类型:String
默认值: "GET")。请求方式("POST"或"GET"),默认为"GET"。注意:其它HTTP请求方法,如PUT和DELETE也可以使用,但仅部分浏览器支持。
url
类型:String
默认值:当前页地址。发送请求的地址。
success
类型:Function
请求成功后的回调函数。
参数:由服务器返回,并根据dataType参数进行处理后的数据;描述状态的字符串。
这是一个Ajax事件。
async
类型:Boolean
默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为false。
注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
cache
类型:Boolean
默认值: true,dataType为script和jsonp时默认为false。设置为false将不缓存此页面。
jQuery 1.2新功能。
data
类型:String
发送到服务器的数据。将自动转换为请求字符串格式。GET请求中将附加在URL后。查看processData选项说明以禁止此自动转换。必须为Key/Value格式。如果为数组,jQuery将自动为不同值对应同一个名称。如{foo:["bar1",
"bar2"]}转换为'&foo=bar1&foo=bar2'。
dataType
类型:String
预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:
·"xml":返回XML文档,可用jQuery处理。
·"html":返回纯文本HTML信息;包含的script标签会在插入dom时执行。
·"script":返回纯文本JavaScript代码。不会自动缓存结果。除非设置了"cache"参数。注意:在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
·"json":返回JSON数据。
·"jsonp": JSONP格式。使用JSONP形式调用函数时,如"myurl?callback=?" jQuery将自动替换?为正确的函数名,以执行回调函数。
·"text":返回纯文本字符串
error
类型:Function
默认值:自动判断(xml或html)。请求失败时调用此函数。
有以下三个参数:XMLHttpRequest对象、错误信息、(可选)捕获的异常对象。
如果发生了错误,错误信息(第二个参数)除了得到null之外,还可能是"timeout", "error",
"notmodified"和"parsererror"。
这是一个Ajax事件。
Ajax的最大的特点
Ajax可以实现异步通信效果,实现页面局部刷新,带来更好的用户体验;按需获取数据,节约带宽资源
ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制
ajax请求的时候get和post方式的区别
get一般用来进行查询操作,url地址有长度限制,请求的参数都暴露在url地址当中,如果传递中文参数,需要自己进行编码操作,安全性较低。
post请求方式主要用来提交数据,没有数据长度的限制,提交的数据内容存在于http请求体中,数据不会暴漏在url地址中。
ajax的过程
1.创建XMLHttpRequest对象,也就是创建一个异步调用对象
2.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息
3.设置响应HTTP请求状态变化的函数
4.发送HTTP请求
5.获取异步调用返回的数据
6.使用JavaScript和DOM实现局部刷新
JavaScript的同源策略
同源策略是客户端脚本(尤其是Javascript)的重要的安全度量标准。它最早出自Netscape Navigator2.0,其目的是防止某个文档或脚本从多个不同源装载。所谓同源指的是:协议,域名,端口相同,同源策略是一种安全协议,指一段脚本只能读取来自同一来源的窗口和文档的属性。
解决跨域问题
理解跨域的概念:协议、域名、端口都相同才同域,否则都是跨域
出于安全考虑,服务器不允许ajax跨域获取数据,但是可以跨域获取文件内容,所以基于这一点,可以动态创建script标签,使用标签的src属性访问js文件的形式获取js脚本,并且这个js脚本中的内容是函数调用,该函数调用的参数是服务器返回的数据,为了获取这里的参数数据,需要事先在页面中定义回调函数,在回调函数中处理服务器返回的数据,