AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
一.AJAX XHR
XMLHttpRequest对象用于在后台与服务器交换数据,就这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
1.创建XMLHttpRequest对象
所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象,在ie5和ie6不支持XMLHttpRequest对象,但是支持ActiveX 对象。故要引用下面代码:
var ob;
if(window.XMLHttpRequest)//判断浏览器是否支持XMLHttpRequest
{
ob=new XMLHttpRequest();
}
else
{
ob=new ActiveXObject("Microsoft.XMLHTTP");
}
2.向服务器发送请求GET POST
向服务器发送请求需要用到XMLHttpRequest对象的open()和send()方法。
方法 | 描述 |
---|---|
open(method,url,async) |
规定请求的类型、URL 以及是否异步处理请求。
|
send(string) |
将请求发送到服务器。
|
post和get的区别:(来自百度知道)
1. get是从服务器上获取数据,post是向服务器传送数据。
2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4中最大量为80KB,IIS5中为100KB。
5. get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
建议:
1、get方式的安全性较Post方式要差些,包含机密信息的话,建议用Post数据提交方式;
2、在做数据查询时,建议用Get方式;而在做数据添加、修改或删除时,建议用Post方式;
var ob;
if(window.XMLHttpRequest)//判断是否支持XMLHttpRequest
{
ob=new XMLHttpRequest();
}
else
{
ob=new ActiveXObject("Microsoft.XMLHTTP");
}
A.GET请求
ob.open("GET","demo_get.asp",true);
ob.send();//有可能请求到缓存
ob.open("GET,"demo_get.asp"+"&_dc="+new Date().getTime(),true);
ob.send();//避免请求到缓存,每次提交都用不同的时间
ob.open("GET","demo_get.asp?fname=Bill&lname=Gates",true);//用GET发送信息
ob.send();
B.POST请求
ob.open("POST","demo_get.asp",true);
ob.send();//用post进行请求
ob.open("POST","demo_get.asp",true);
ob..setRequestHeader("Content-type","application/x-www-form-urlencoded");//添加HTTP头
ob.send("Hello");//传送数据
是否异步:
不异步:当发送请求时需要等待服务器的响应后才执行其他的脚本,如果服务器响应时间较慢,会引起程序停止或挂起。
异步:在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
3.服务器响应
responseText 获得字符串的响应
responseXML 获得XML形式的响应数据
var text=ob.responseText;;
var xml=ob.responseXML;//XML响应的内容需要做处理
4.onreadystatechange事件
请求被服务器接受到,我们需要做一些基于响应的任务,当readystate改变时触发onreadystatechange事件
属性 | 描述 |
---|---|
onreadystatechange | 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。 |
readyState |
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
|
status |
200: "OK" 404: 未找到页面 |
ob.onreadystatechange=function()
{
var obj=responseText;//服务器响应的内容
}