最简单的ajax例子:
get.html:
1 <html>
2 <head>
3 <script type="text/javascript">
4 //alert('aa');
5 function btn_click(){
6 //创建XMLHttpRequest对象
7 var xhr = new XMLHttpRequest();
8 //获取值
9 var name = document.getElementById("name").value;
10 var age = document.getElementById("age").value;
11 console.log(name+''+age);
12 //配置XMLHttpRequest对象
13 xhr.open("get","get.php?name="+name+"&age="+age,true);
14 //设置回调函数
15 xhr.onreadystatechange = function(){
16 if(xhr.readyState == 4 && xhr.status == 200){
17 document.getElementById("result").innerHTML = xhr.responseText;
18 }
19 }
20 //发送请求
21 xhr.send(null);
22
23 }
24
25 </script>
26 </head>
27 <body>
28 <label for="name">
29 姓名:
30 </label>
31 <input type="text" id="name" />
32 <br />
33 <label for="age">
34 年龄:
35 </label>
36 <input type="test" id="age" />
37 <br />
38 <input type="button" value="GET" id="btn" onclick="btn_click();" />
39 <div id="result">
40 </div>
41
42
43 </body>
44 </html>
get.php:
1 <?php
2 $name = $_GET['name'];
3 $age =$_GET['age'];
4 echo 'your name:',$name,'your gender',$age;
浅析AJAX
1、Ajax别名:
- 无刷新技术:
调用ajax程序的页面,从地址栏上看,没有变化,没有刷新,因此,无刷新技术
- 局部刷新技术:
调用ajax程序的页面,可能通过响应内容,动态的改变部分DOM节点
- 异步刷新技术:
Js会阻塞后面的js代码执行和html代码的渲染.
而用异步传输数据,不会阻塞后面js代码执行和html代码的渲染.
- 同步:
就像打电话,电话不挂,人也不干其他的,等到挂电话后才能干其他的.
异步:
就像发短信,发完短信后,可以干其他的事情,同时等着短信回来.
2、XMLHttpRequest的详细属性
responseText: 服务器响应的主体信息,body信息.
responseXML: 对于大量的格式化文档,可以用XML来传输或交换,由后台程序把数据封装在XML文档时, js接收XML对象并解析该内容.
status: 是服务器的返回状态码,例:200,成功, 403 forbidden 禁止, 404 not found未找到
50X系列,内部服务器错误
statusText: 服务器返回的状态码,对应的文字描述
readyState: XMLHttpRequest对象自身的状态码,0,4 [0,1,4], [2,3,4]
onreadystatechange : 事件属性,绑定当XMLHttpRequest对象的状态发生变化的时候,激发的函数
3、XMLHttpRequest的详细方法
open(‘请求方式’,url, 同步/异步); false->同步, true->异步
send(null/参数), 参数的写法:k1=v1&k2=v2&kn=vn…..
setRequestHeader(key,value); 设置请求的头信息
Abort: 忽略,不要再进行下去了,到此为止
getResponseHeader: 获取响应的某个头信息
getAllResponseHeaders: 获取响应的所有头信息
4、关于兼容:
function xhr(){
var xxx = null;
if(window.XMLHttpRequest){
xxx = new XMLHttpRequest();
}else{
xxx = new ActiveXObject('Microsoft.XMLHTTP');
}
return xxx;
}