JS实现AJAX请求_1（基础篇）
AJAX：全称“Asynchronous JavaScript and XML” ? (异步的JavaScript与XML)
?
AJAX请求的特点：
? 1，不刷新页面
? 2，服务器仅返回需要的数据
?
AJAX引擎：XMLHttpRequest
? 此对象是浏览器中的内置对象，在目前的所有浏览器中都支持此对象。
?
IE中获取此对象：
if(window.ActiveXObject){
var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
?非IE中获取此对象：
var xmlHttp=new XMLHttpRequest();
?
兼容模式：
var xmlHttp;//声明一个对象
function createXMLHttpRequest(){
if(window.ActiveXObject){//如果是IE，采用这种方式获取
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}else{//非IE采用这种方式获取
xmlHttp=new XMLHttpRequest();
}
}
?
?请求的格式：
? xmlHttp.open(请求方式,请求地址,[是否为异步请求]);
? xmlHttp.send();
?
Get请求：
xmlHttp.open("GET","ajax.do?name=tom",true);
xmlHttp.send();
?注：
get请求的传值方式为请求地址后面跟 ??key=value
?
Post请求：
xmlHttp.open("POST","ajax.do",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send("name=tom");
?注：
post请求的传值方式是在send()方法中进行传值，多个值用逗号隔开：name=tom,age=12
setRequestHeader的意思是设置请求头的类型为表单类型：Content-Type="application/x-www-form- ? ? ? ? ? ? urlencoded" ?是form表单的默认属性
?
?一个完整的AJAX请求的流程：
? 1，创建XMLHttpRequest对象
? 2，调用xmlHttp.open()设置请求内容
? 3，设置回调函数（根据服务器返回的状态信息，做什么事情）
? 4，调用xmlHttp.send()发送请求
function sendAjax(){
createXMLHttpRequest();//调用上面设置的兼容模式
xmlHttp.open("GET","ajax.do?name=tom",true);
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.onreadystatechange=callback;//状态信息发生改变调用函数
xmlHttp.send();
}
//回调函数
function callback(){
alert("callback");
}
sendAjax();//浏览器会弹出几次框（不同的浏览器可能不同）
?获取AJAX请求的状态码和HTTP协议的状态码：
?AJAX请求的状态码有四个值：
? var xmlState=xmlHttp.readyState;
? 1，已初始化
? 2，数据传输中
? 3，响应数据传输中
? 4，响应完毕
HTTP协议的状态码有很多：
? var httpState=xmlHttp.status;
常见的状态码如下：
| 状态码 | 意义 |
| 200 | 服务器正确处理了请求并响应 |
| 404 | 请求的页面未找到 |
| 403 | 没有权限访问请求的页面 |
| 405 | 页面不接收该请求方式 |
| 408 | 请求超时 |
| 500 | 服务器处理请求时发生异常 |
| 503 | 服务暂时不可用 |
| 304 | 网页未修改
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
