Ajax详解

Ajax

1、什么是Ajax

​ AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

​ AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

2、Ajax有什么用

• 与服务器异步交互
• 浏览器页面局部刷新

2.1、什么是同步交互与异步交互

​ 那问题很多的小明又问了，什么是同步交互与异步交互？即：

• 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
• 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

2.2、Ajax的用途

​ 当我们玩游戏时，需要起个昵称，当输入昵称后，就会使用Ajax技术向服务器发出请求，服务器会查询这个昵称是否存在，如果服务器返回true表示该昵称已经存在了，客户端在得到结果后会显示“昵称已被使用！”。还有输入验证码的时候，当输入验证码后，光标移开就会向服务器发送请求，不用等到提交，有利于提高用户体验。

2.3、Ajax的优缺点

优点：

• AJAX使用Javascript技术向服务器发送异步请求；
• AJAX无须刷新整个页面；
• 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

缺点：

• AJAX并不适合所有场景，很多时候还是要使用同步交互；
• AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
• 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

3、Ajax的使用

​ 通过JavaScript书写AJAX方法相应的比较复杂,还要考虑到浏览器的兼容性等一系列问题.而JQuery中已经将AJAX相关的操作进行了封装,使用时只需要在合适的地方调用AJAX相关的方法即可,相比而言,JQuery实现AJAX更加简洁,方便.

3.1、$.ajax(参数)

​ $.ajax()可以通过发送HTTP请求加载远程数据,是jQuery最底层的AJAX的实现,具有较高灵活性。

常用设置参数如下:

参 数	说 明
String url	发送请求的地址,默认为当前页地址
String type	请求方式(POST或者GET,默认为GET)
Number timeout	设置请求超时时间
Object data 或 String data	发送到服务器的数据
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text
function beforeSend(XMLHttpRequest xhr)	发送请求前调用的函数参数xhr,可选, XMLHttpRequest对象
function complete(XMLHttpRequest xhr,String ts)	请求完成后调用的函数(请求成功或失败时均调用)参数: xhr,可选, XMLHttpRequest对象, ts可选,描述请求类型的字符串
function success(Object result,String ts)	请求成功后调用的函数参数result:可选,由服务器返回的数据参数ts可选,描述请求类型的字符串
function error(XMLHttpRequest xhr,String em,Exception e)	请求失败时调用的函数参数: xhr,可选, XMLHttpRequest对象, 参数em可选,错误信息参数e:可选 ,捕获的异常对象
boolean global	默认为true,表示是否触发全局的AJAX事件

3.2、$get（）

​ $.get()方法是JQuery封装的发送HTTP GET请求从服务器加载数据的AJAX方法,具体语法如下:

 $.get(url,data,success(resp,status,xhr),dataType)

参数说明:

参 数	说 明
String url	必选,规定将请求发送到呢个url
Object data 或 String data	可选,规定发送给服务器的数据
function success(Object result,String status,XMLHttpRequest xhr)	可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text

3.3、$post()

$.post()是jQuery封装的发送HTTP POST请求从服务器加载数据的AJAX方法,语法如下:

$.post(url,data,success(resp,status,xhr),dataType);

参 数	说 明
String url	必选,规定将请求发送到呢个url
Object data 或 String data	可选,规定发送给服务器的数据
function success(Object result,String status,XMLHttpRequest xhr)	可选,请求成功后调用的函数:参数result:可选,服务器返回的结果参数status:可选,请求的状态参数xhr: 可选,XMLHttpRequest对象
String dataType	预期服务器返回的数据类型,可用类型有:XML,HTML,Script,JSON,JSONP,Text