Ajax在本质上是一个浏览器端的技术 XMLHttpRequest
XMLHttpRequest对象
XMLHttpRequest对象在IE浏览器和非IE浏览器中创建的方法不同。 简而言之:它可以异步从服务器端获取txt或者xml数据
老版本IE: new ActiveXObject("Microsoft.XMLHTTP");
新版本浏览器: new XMLHttpRequest();
为XMLHttpRequest对象设置请求参数
1.GET方式
1.1设置参数 xhr.open("GET", "GetAreasByAjax.ashx", true);
1.2GET方式请求可以设置浏览器不使用缓存xhr.setRequestHeader("If-Modified-Since", "0");
1.3发送: xhr.send(null);//GET方式
2.POST方式:
1.1设置参数:xhr.open("POST", "GetAreasByAjax.ashx", true);
1.2添加请求头:xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
回调函数
判断时注意,要:xhr.readyState == 4&&xhr.status == 200,不要xhr.status == 200&&xhr.readyState == 4
readyState属性
readyState属性指出了XMLHttpRequest对象在发送/接收数据过程中所处的几个状态。XMLHttpRequest对象会经历5种不同的状态。
0:未初始化。new完后;
1:已打开(已经初始化了)。对象已经创建并初始化,但还未调用send方法
2:已发送。已经调用send 方法,但该对象正在等待状态码和头的返回;
3:正在接收。已经接收了部分数据,但还不能使用该对象的属性和方法,因为状态和响应头不完整;
4:已加载。所有数据接收完毕
XMLHttpRequest常用属性
onreadystatechange 返回或设置异步请求的事件处理程序
readyState 返回状态码:0:未初始化;1:打开;2:发送;3:正在接收;4:已加载responseText 使用字符串返回HTTP响应responseXML(xml对象,不是xml字符串) 使用XML DOM对象返回HTTP响应,返回的是一个对象,不是xml字符串。通过ajax发起post请求时,需要注意的3点:
1.初始化的时候必须设置为post
xhr.open('post','url',true);2.必须设置请求报文头Content-Type的值为:application/x-www-form-urlencoded
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
3.如果有请求报文体,则在调用send()方法的时候,设置。
xhr.send('txtName=steve&gender=male&age=18');案例
服务器段代码:
public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; context.Response.Clear();//清除之前的请求 context.Response.Write(DateTime.Now.ToString("hh:mm:ss")); context.Response.End();//结束请求,防止相应其它内容 }
页面代码:
GET方式:
//确定事件 document.getElementById('btn').onclick = function () { //JS实现Ajax步骤 //1.创建XMLHttpRequest对象 //1.1首先创建一个空对象 var xhr = null; //1.2新浏览器支持XMLHttpRequest 旧浏览器(IE6)支持ActiveXObject //为了兼容,判断 if (XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (ActiveXObject) { //1.3别忘了重要的参数Microsoft.XMLHttp xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2.设置回调函数 xhr.onreadystatechange = function () { //回调函数中有XMLHttpRequest的三个重要属性 //xhr.readyState 有五种状态0未初始化,1已打开,2已发送,3正在接收,4已加载 //xhr.status 返回http状态码200表示成功 //xhr.responseText 这里使用字符串返回http响应 (相应方式多种) if (xhr.readyState == 4 && xhr.status == 200) { document.getElementById('div1').innerHTML = xhr.responseText; }; } //3.初始化对象,三个参数,①请求方式get,post②请求的一般处理程序③bool(是否是异步请求) //解决缓存问题的两种方法 //方法一//随机数解决 //xhr.open('get', 'Handler1.ashx?m='+Math.random(), true); //方法二,设置请求报文头,,,在初始化完毕后,发起请求之前设置请求报文头 xhr.open('get', 'dd/Handler1.ashx', true); xhr.setRequestHeader('if-modified-since', '0'); //4.发起请求 参数是请求报文体,,,get请求没有请求报文体用null xhr.send(null); }//onclick }//onload
POST方式:
//确认事件 document.getElementById('btnPost').onclick = function () { var xhr = null; //POST请求 //1.创建对象 if (XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHttp"); } //2.设置回调函数 xhr.onreadystatechange = function () { //三个重要属性 if (xhr.readyState==4 && xhr.status==200) { document.getElementById('div1').innerHTML = xhr.responseText; } } //3.初始化 三个参数 xhr.open('post', 'dd/Handler1.ashx', true); //3.1post提交必须设置请求报文头 xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); //4.发送请求,没有请求报文体就写null, //如果有请求报文体,则在调用send()方法的时候,设置。 //xhr.send('txtName=steve&gender=male&age=18'); xhr.send(null); }//onclick