Ajax

前后端数据交互——通过在后台与服务器的少量数据交换，实现页面异步(局部)更新。

异步 -> XMLHttpRequest

后台 服务器

适应网址：

var request;

if(window.XMLHttpRequest){

request=new XMLHttpRequest(); //IE7+、Firefox、Chrome...

}else{

request=new ActiveXObject("Mierosoft.XMLHttp"); //IE5、6

}

当然，也可以通过try-catch异常处理机制(看下面四步操作中第一步讲解)完成。

HTTP请求

get：| 信息获取

：| URL传递参数

这种方式 快 ，但对发送信息数量有限制。

post：| 修改服务器资源 —— 安全

用XMLHttpRequest发送请求

open(method,url,sync); //发送请求方法、请求地址(从哪里获得数据)、同步/异步

send(string); //发送 没有数据时(从后端读取数据)string应写为null——兼容火狐

如：

request.open("GET","get.php",true); //true代表异步操作

request.send(null);

ajax发送异步请求的四步操作

第一步(得到XMLHttpRequest)

1.得到XMLHttpRequest

大多数浏览器都支持:var xmlHttp=new XMLHttpRequest();

IE6.0:var xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);

IE5.0以更早版本的IE:var xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”);

2.编写创建XMLHttpRequest对象的函数 —— 兼容浏览器

function createXMLHttpRequest(){

try{

return new XMLHttpRequest();

} catch(e){

try{

return new ActiveXObject(“Msxml2.XMLHTTP”);

}catch(e){

try{

return new ActiveXObject(“Microsoft.XMLHTTP”);

}catch(e){

alert(“哥们儿,你用的是什么浏览器啊?”);

throw e;

}

}

}

}

第二步(打开与服务器的连接)

xmlHttp.open():用来打开与服务器的连接,它需要三个参数:

请求方式:可以是GET与POST

请求的URL:指定服务器端资源,例如:/day23_1/AServlet

请求是否为异步:如果为true表示发送异步请求,否则同步请求

第三步(发送请求)——send()

第四步

在xmlHttp对象的一个事件上注册监听器:onreadystatechange

xmlHttp对象一共有5个状态

0:初始化未完成状态,只是创建了XMLHttpRequest对象,还未调用open()方法

1:请求已开始,open()方法已调用,但还没调用send()方法

2:请求发送完成状态,send()方法已调用

3:开始读取服务器响应

4:读取服务器响应结束(通常我们只关心最后这个状态!!!)

xmlHttp.onreadystatechange = function(){//xmlHttp的5种状态都会调用本方法

if(xmlHttp.readyState ==4 && xmlHttp.status == 200){//双重判断:判断是否为4状态,而且还要判断是否为200

var text=xmlHttp.responseText;

}

};

案例——ajax读取“Hello world”

服务器端代码：

public class AServlet extends HttpServlet {

public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

System.out.println("Hello world！");

response.getWriter().print("Hello world");

}

}

页面代码：

Ajax 数据交互

点击这里，有惊喜！

function createXMLHttpRequest() {

try{

return new XMLHttpRequest(); // 绝大多数浏览器

}catch (e) {

try{

return ActiveXObject("Msxml2.XMLHTTP"); // IE6.0

}catch (e) {

try{

return ActiveXObject("Microsoft.XMLHTTP"); // IE5.5及更早版本

}catch (e) {

alert("哥们儿，你这浏览器，，，不行啊！");

throw e;

}

}

}

}

window.οnlοad=function () {

var btn=document.getElementById("btn"),

h1=document.getElementById("h1"),

text;

btn.οnclick=function () {

// var xmlHttp;

// if(window.XMLHttpRequest){

// xmlHttp=new XMLHttpRequest();

// }else{

// xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

// }

var xmlHttp=createXMLHttpRequest(); //这一步和上面被注释的几行本质上是一个东西

xmlHttp.open("GET","/文件操作/AServlet",true);

xmlHttp.send(null); //这是什么取决于get / post

//xmlHttp.send(处理了的post数据);

xmlHttp.onreadystatechange=function () {

if(xmlHttp.readyState===4 && xmlHttp.status===200){

text=xmlHttp.responseText; //得到服务器响应的文本格式的内容(更通用)——var text=XMLHttp.responseXML; //得到服务器响应的xml内容，这就是document对象了

h1.innerHTML=text;

}

}

}

}

最后，再放上jQuery中ajax发送请求数据的案例：

本文同步分享在 博客“行舟客”(CSDN)。

如有侵权，请联系 support@oschina.cn 删除。

本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。