用js内置对象XMLHttpRequest 来用ajax
步骤：
/* 用XMLHTTPRequest来进行ajax异步数据交交互*/
主要有几个步骤：
//1.创建XMLHTTPRequest对象
//最复杂的一步
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的bug进行修正。
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType('text/xml');
};
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
2.注册回调函数
xmlhttp.onreadystatechange = callback;
//3.设置连接信息。
//open第一个参数链接方式，第二是url地址
//3，true是异步链接
//xmlhttp.open("GET","xhr.php?name=" + username,true);
//使用post方式发送数据
xmlhttp.open("POST","xhr.php",true);
//post需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4，发送数据，开始和服务器进行交互
//中如果true, send这句话会立即执行
//如果是false（同步），send会在服务器数据回来才执行
//xmlhttp.send(null);
//因为是get所以send中不需要内容
xmlhttp.send('name=' +username);
}
//5.写回调函数,不同相应状态进行处理
function callback(){
alert(xmlhttp.readyState);
//判断对象状态是交互完成，接收服务器返回的数据
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//["dada","xiaoyin","liujie"]
//纯文本的数据
var responseText = xmlhttp.responseText;
var divNode = document.getElementById('result');
//6.将服务器的数据显示在客户端
divNode.innerHTML = responseText;
}
}
代码：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>XHR</title>
6 <link rel="stylesheet" href="../templates/css/verify.css">
7 </head>
8 <body>
9
10 <input type="text" id="username"><input type="button" value="提交" onclick="dadaHttpRequest()">
11 <div class="box" id="box"></div>
12 <script type="text/javascript" src="../templates/js/jquery.js"></script>
13 <script>
14
15 /* 用XMLHTTPRequest来进行ajax异步数据交交互*/
16 //1.创建XMLHTTPRequest对象
17 var xmlhttp;
18 //最复杂的一步
19 function dadaHttpRequest(){
20 var username = document.getElementById('username').value;
21 if (window.XMLHttpRequest) {
22 // code for IE7+, Firefox, Chrome, Opera, Safari
23 xmlhttp = new XMLHttpRequest;
24
25 //针对某些特定版本的mozillar浏览器的bug进行修正。
26 if (xmlhttp.overrideMimeType) {
27 xmlhttp.overrideMimeType('text/xml');
28 };
29
30 } else if (window.ActiveXObject){
31 // code for IE6, IE5
32 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
33 };
34
35 //2.注册回调函数
36 //onreadystatechange是每次 readyState 属性改变的时候调用的事件句柄函数。
37 xmlhttp.onreadystatechange = callback;
38
39 //3.设置连接信息
40 //初始化HTTP请求参数，但是并不发送请求。
41 //第一个参数连接方式，第二是url地址,第三个true是异步连接，默认是异步
42 xmlhttp.open("GET","xhr.php?name="+username,true);
43
44 /*******************************************/
45 /*如果是xmlhttp.open("GET","xhr.php",true);*/
46 /* xmlhttp.send('name=' +username); */
47 /* 不行的 */
48 /*******************************************/
49
50 //使用post方式发送数据
51 //xmlhttp.open("POST","xhr.php",true);
52 //post需要自己设置http的请求头
53 //xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
54
55 //4，发送数据，开始和服务器进行交互
56 //发送 HTTP 请求，使用传递给 open() 方法的参数，以及传递给该方法的可选请求体。
57 //中如果true, send这句话会立即执行
58 //如果是false（同步），send会在服务器数据回来才执行
59 xmlhttp.send(null);
60 //因为是get所以send中不需要内容
61 //xmlhttp.send('name=' +username);
62
63 }
64
65 //5回调函数,不同相应状态进行处理
66 function callback(){
67 //alert(xmlhttp.readyState);
68 //判断对象状态是交互完成，接收服务器返回的数据
69 if (xmlhttp.readyState==4 && xmlhttp.status==200)
70 {
71 //["dada","xiaoyin","liujie"]
72 //纯文本的数据
73 var responseText = xmlhttp.responseText;
74 var divNode = document.getElementById('box');
75 //6.将服务器的数据显示在客户端
76 divNode.innerHTML = responseText;
77 }
78 }
79 </script>
80 </body>
浙公网安备 33010602011771号