手写AJAX事例
浏览数：33 /
时间：2015年06月09日
Ajax在本质上是一个浏览器端的技术
Ajax技术之主要目的在于局部交换客户端及服务器间之数据,主要使用XMLHttpRequest来与服务器交互
创建XMLHttpRequest对象
在IE、Firefox、safari和Opera中创建该对象的JavaScript代码为：
var xhr = new XMLHttpRequest();
在IE5/6中代码为：
var xmlRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
设置异步对象参数并发送请求
1.GET方式
1.1设置参数
xhr.open("GET", "GetAreasByAjax.ashx?isAjax=1", true);
1.2GET方式请求可以设置浏览器不使用缓存
xhr.setRequestHeader("If-Modified-Since", "0");
1.3发送: xhr.send(null);//GET方式
2.POST方式：
1.1设置参数：xhr.open("POST", "GetAreasByAjax.aspx", true);
1.2添加请求头：xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //使用POST方式必需添加此请求头
1.3发送：xhr.send("isAjax=1&na=123");//POST方式
设置回调函数
异步使用XMLHttpRequest对象时，必须使用：onreadystatechange事件
使用模式：
创建该对象；-new
设置readystatechange事件触发一个回调函数; -onreadystatechagne
打开请求；-open
发送请求；-send
注：在回调函数中检查readyState属性，看数据是否准备就绪(是否等于4)
异步对象readyState属性
0：未初始化。new完后;
1：已打开。对象已经创建并初始化，但还未调用send方法
2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
4：已加载。所有数据接收完毕
示例:
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求参数(请求方式,请求url,是否异步)
xhr.open("get","FirsAjax.ashx",true);
//清空缓存
xhr.setRequestHeader("If-Modified-Since", "0");
//设置回调函数
xhr.onreadystatechange=function(){
//1表示开始发送请求报文,2表示发送完毕,3表示开始接收响应报文4,表示接收完毕
if(xhr.readyState==4) {
alert(xhr.responseText);
}
}
//发送请求报文 如果是Get类型则为null
xhr.send(null);
注:如果是POST方式则需要加入以下代码
xhr.setRequestHeader("Context-Type","application/x-www-form-urlencoded");
注:在URL参数中添加"&"参数 encodeURLComponent("&");
XMLHttpRequest常用方法
abort() 取消请求
open() 需要使用多个参数，第一个设置方法属性，第二个设置目标URL，第三个指定是同步(false)还是异步(true)发送请求
send() 发送请求到服务器
setRequestHeader() 添加定义HTTP头到请求
getAllResponseHeaders() 获取Http响应并没有的整个列表
getResponseHeader() 仅获取指定的http响应头
XMLHttpRequest常用属性
onreadystatechange 返回或设置异步请求的事件处理程序
readyState 返回状态码: 0 未初始化 1 打开 2 发送 3 正在接收 4 已加载
responseText 使用字符串返回HTTP响应体
responseXML 使用XML dom对象返回HTTP响应
status 返回HTTP状态码
Json--B/S结构数据传递格式
AJAX数据传输标准为JSon, json是js对象的一个字面量表示法.
C#中将.Net对象序列化为Json字符串的方法：
JavaScriptSerializer jss = new JavaScriptSerializer();
jss.Serialize(p)，
JavaScriptSerializer在System.Web.Extensions.dll中
完整：System.Web.Script.Serialization.JavaScriptSerializer
在JavaScript中：
函数名后如果有圆括号，意思就是将函数的返回值赋给等号左边的变量；
没有圆括号，是将函数本身赋给等号前的变量。
异步对象不支持跨域访问
使用Jsons解决;:
<script type="text/javascript>
function acceptJson(jsonObj) {
alert(jsonObj.name);
}
<script src="http://www.baidu.com/1.aspx" /> //跨域请求
acceptJson({id:1, name:‘jim‘}) //1.aspx返回的JS代码
<script type="text/javascript">
window.onload = function () {
document.getElementById("login").onclick = function () {
var xhr = createXhr();
var name = document.getElementById("txtName");
var pwd = document.getElementById("txtPwd");
xhr.open("post", "PH/Login.ashx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
var res = xhr.responseText;
if (res == "ok") {
alert("登陆成功!");
window.location = "Index.htm";
}
else {
alert("用户名或密码错误");
}
}
}
var data = "name=" + name.value + "&pwd=" + pwd.value + (gel("remember").checked ? "&remember=1" : "");
xhr.send(data);
}
}
</script>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
