Web : AJAX - 09

同步异步

所谓同步，指当浏览器访问一个新的地址时，在响应之前阻塞当前页面，直到响应回来后，阻塞结束展示结果。

所谓异步，指当浏览器访问一个新的地址时，浏览器不被阻塞，继续工作，当响应回来后回调处理结果。

浏览器通常的访问都是同步访问

但，某些场景下有异步访问的需求，例如，注册时用户名已存在的校验。

AJAX

概述

AJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。

可以使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，现在传输的数据不仅仅是XML）。

特点

异步请求 局部刷新

应用场景

百度搜索框 直播弹幕 网页qq ...

原生js实现

在DHTML中提供了XMLHttpRequest对象，可以用它来实现AJAX。

获取XMLHttpRequest对象

//1 创建XMLHttpRequest对象 function ajaxFunction(){ var xmlHttp; try{ //现代浏览器（IE7+、Firefox、Chrome、Safari 和 Opera）都有内建的 XMLHttpRequest 对象 xmlHttp = new XMLHttpRequest(); }catch(e){ try{ //IE6.0 xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ //IE5.0及更早版本 xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("..."); throw e; } } } }

设置回调函数

在ajax执行时，随着执行的过程，xmlHttpRequest对象中的readystate属性会经历如下几个状态的变化

结果

0	代表未初始化。 还没有调用 open 方法
1	代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2	代表已加载完毕。send 已被调用。请求已经开始
3	代表交互中。服务器正在发送响应
4	代表完成。响应发送完毕

每次状态值变化都会出发onreadystatechange事件，开发者可以监听此事件，当状态转变为4的时候处理响应结果

var data = null; var xmlHttp = ajaxFunction(); xmlHttp.onreadystatechange=function(){ if(xmlHttp.readyState==4){ if(xmlHttp.status==200||xmlHttp.status==304){ data = xmlHttp.responseText; } } }

可以通过xmlHttp.status获取服务器返回的状态码

可以通过xmlHttp.responseText获取返回的数据

发送ajax请求

打开连接

xmlHttp.open(method,url,asynch);

method：请求类型，类似"GET"或"POST"的字符串。

url：路径字符串，指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

asynch：表示请求是否要异步传输，默认值为true(异步)。

设置请求头

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

发送请求

GET请求

xmlHttp.send(null);

send方法参数为http请求的实体内容

GET请求没有实体内容，传入null即可

POST请求

xmlHttp.send("a=7&b=8");

send方法参数为http请求的实体内容

传入要传输的请求参数即可。

POST方式传输请求参数，必须设置头Content-Type为application/x-www-form-urlencoded

实现AJAX

$.ajax(url, [data], [async], [callback]);

url -- 发送请求的URL地址 data -- 可选, 发送至服务器的key/value数据 async -- 可选, 默认为true, 表示异步交互 type -- 请求方式 , 默认为"GET"。 success -- 可选, 请求成功后执行的函数, 函数参数: result -- 服务器返回的数据

$.get(url[, data][, callback][, type]);

$.post(url[, data][, callback][, type]);

$(selector).load(url,data,callback);

selector -- 选择器, 将从服务器获取到的数据加载到指定的元素中 url -- 发送请求的URL地址 data -- 可选, 向服务器发送的数据 key/value数据 callback -- 可选, load方法完成后所执行的函数