首页 > 代码库 > javascript 创建ajax函数 "四部曲"
javascript 创建ajax函数 "四部曲"
开门见山简要的来写一个ajax函数，方便要用到ajax的时候来调用，下面附：获取 json 数据一个小实例，请在服务器下执行...
创建一个 ajax.js 文件把ajax函数代码放进去
//创建ajax函数四部曲 1.创建创建XMLHttpRequest对象 2.连接服务器 3.发送请求 4.接收数据
function ajax(url,sueeccd,lose){
// 1.创建XMLHttpRequest对象
//定义一个全局变量
var xhr = null;
//判断是否支持此对象
if (window.XMLHttpRequest) {
// W3C
xhr = new XMLHttpRequest();
}else{
//低版本的IE
xhr = new ActiveXObject(‘Microsoft.XMLHTTP‘);
}
// 2.连接服务器
// ‘?t=‘+Math.random() 这句代码是为了清除浏览器缓存，GET为获取，POST为上传，true为异步，false为同步
xhr.open(‘GET‘,url+‘?t=‘+Math.random(),true);
// 3.发送请求
xhr.send();
// 4.接收数据
//onreadystatechange事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。
xhr.onreadystatechange=function(){
//当 xhr.readyState == 4那么就代表（完成）响应内容解析完成，可以在客户端调用了
if (xhr.readyState == 4) {
// xhr.status == 200 交易成功(OK),那么成功就执行下面的代码
if (xhr.status == 200) {
//responseText返回来的数据
sueeccd(xhr.responseText);
}else{
//失败了返回的数字来进行查找,如果我传了这个参数我才返回这个失败函数,否则不理它
if (lose) {
lose(xhr.status);
};
}
}
}
}
小实例：
创建一个 ajax.json 文件 创建对象
//创建json对象来测试
[{"name":"zion","age":"23","sex":"男"},{"name":"lee","age":"28","sex":"女"},{"name":"春哥","age":"25","sex":"你懂的!"}]
创建一个 ajax.html 文件来测试，记得把 ajax.js 文件引入进来
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
</head>
<body>
<input type="button" value="http://www.mamicode.com/按钮" id="btn">
<div id="show"></div>
</body>
</html>
<script src="http://www.mamicode.com/ajax.js"></script>
<script>
var oBtn = document.getElementById(‘btn‘);
var oShow = document.getElementById(‘show‘);
oBtn.onclick=function(){
ajax(‘ajax.json‘,function(str){
// 先用eval()解析函数（json反馈值）
var strData = http://www.mamicode.com/eval(str);
//遍历strData对象的数组
for(var i in strData){
//在DIV中显示返回的josn数据
oShow.innerHTML += strData[i].name+‘<br/>‘;
}
},function(state){
//如果错误的时候就弹出一个错误返回值来方便查询出错原因!
alert(state);
})
}
</script>
对象 XMLHttpRequest 的 readyState属性 status属性 数字解释
属性readyState的含义:
0 － （未初始化）还没有调用send()方法
1 － （载入）已调用send()方法，正在发送请求
2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
3 － （交互）正在解析响应内容
4 － （完成）响应内容解析完成，可以在客户端调用了
属性status的含义:
0**：未被始化
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
100——客户必须继续发出请求(Continue)
101——客户要求服务器根据请求转换HTTP协议版本(Switching protocols)
200——交易成功(OK)
201——提示知道新文件的URL(Created)
202——接受和处理、但处理未完成(Accepted)
203——返回信息不确定或不完整(Non-Authoritative Information)
204——请求收到，但返回信息为空(No Content)
205——服务器完成了请求，用户代理必须复位当前已经浏览过的文件(Reset Content)
206——服务器已经完成了部分用户的GET请求(Partial Content)
300——请求的资源可在多处得到(Multiple Choices)
301——删除请求数据(Moved Permanently)
302——在其他地址发现了请求数据(Found)
303——建议客户访问其他URL或访问方式(See Other)
304——客户端已经执行了GET，但文件未变化(Not Modified)
305——请求的资源必须从服务器指定的地址得到(Use Proxy)
306——前一版本HTTP中使用的代码，现行版本中不再使用
307——申明请求的资源临时性删除(Temporary Redirect)
400——错误请求，如语法错误(Bad Request)
401——请求授权失败(Unauthorized)
402——保留有效ChargeTo头响应(Payment Required)
403——请求不允许(由于服务器上文件或目录的权限设置导致资源不可用)(Forbidden)
404——没有发现文件、查询或URl(没有找到指定的资源)(Not Found)
405——用户在Request-Line字段定义的方法不允许(Method Not Allowed)
406——根据用户发送的Accept拖，请求资源不可访问(Not Acceptable)
407——类似401，用户必须首先在代理服务器上得到授权(Proxy Authentication Required)
408——客户端没有在用户指定的饿时间内完成请求(Request Timeout)
409——对当前资源状态，请求不能完成(Conflict)
410——服务器上不再有此资源且无进一步的参考地址(Gone)
411——服务器拒绝用户定义的Content-Length属性请求(Length Required)
412——一个或多个请求头字段在当前请求中错误(Precondition Failed)
413——请求的资源大于服务器允许的大小(Request Entity Too Large)
414——请求的资源URL长于服务器允许的长度(Request-URI Too Long)
415——请求资源不支持请求项目格式(Unsupported Media Type)
416——请求中包含Range请求头字段，在当前请求资源范围内没有range指示值，请求也不包含If-Range请求头字段(Requested Range Not Suitable)
417——服务器不满足请求Expect头字段指定的期望值，如果是代理服务器，可能是下一级服务器不能满足请求(Expectation Failed)
500——服务器产生内部错误(Internal Server Error)
501——服务器不支持请求的函数(Not Implemented)
502——服务器暂时不可用，有时是为了防止发生系统过载(Bad Gateway)
503——服务器过载或暂停维修(Service Unavailable)
504——关口过载，服务器使用另一个关口或服务来响应用户，等待时间设定值较长(Gateway Timeout)
505——服务器不支持或拒绝支请求头中指定的HTTP版本(HTTP Version Not Supported )
12029——an unknown error occurred while processing the request on the server. the status code returned from the server was : 12029(原因:网络不通. 刷新一下就知道了)