ajax步骤、状态码、get/post方式区别、封装ajax函数

window.onload = function() {

var oBtn = document.getElementById('btn');

oBtn.onclick = function() {

//打开浏览器

/*

1.创建一个ajax对象

ie6以下new ActiveXObject('Microsoft.XMLHTTP')

*/

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

//alert( xhr.readyState );

//在地址栏输入地址

/*

open方法

参数

1.打开方式

2.地址

3.是否异步

异步:非阻塞 前面的代码不会影响后面代码的执行

同步:阻塞 前面的代码会影响后面代码的执行

*/

xhr.open('get','1.txt',true);

xhr.send();

//等待服务器返回内容

/*

readyState : ajax工作状态

responseText : ajax请求返回的内容就被存放到这个属性下面

on readystate change : 当readyState改变的时候触发

status : 服务器状态，http状态码

*/

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {

if ( xhr.status == 200 ) {

alert( xhr.responseText );

} else {

alert('出错了,Err：' + xhr.status);

}

}

}

}

}

 

 

 

 

onreadystatechange事件

readyState属性：请求状态

0 （初始化）还没有调用open()方法

1 （载入）已调用send()方法，正在发送请求

2 （载入完成）send()方法完成，已收到全部响应内容

3 （解析）正在解析响应内容

4 （完成）响应内容解析完成，可以在客户端调用了

status属性：服务器(请求资源)的状态

返回的内容

responseText：返回以文本形式存放的内容

responseXML：返回XML形式的内容

 

HTTP状态码 如：200、404、500

 

Get方式

            当改了服务器脚本后，再次访问时显示的还是修改之前的数据。即缓存问题

1.缓存 在url？后面连接一个随机数，时间戳

2.乱码 编码encodeURI

xhr.open('get','2.get.php?username='+('刘伟')+'&age=30&' + new Date().getTime(),true);

        Xhr.send();

Post方式

xhr.open('post','2.post.php',true);

//post方式，数据放在send()里面作为参数传递

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//申明发送的数据类型

//post没有缓存问题

//无需编码

xhr.send('username=刘伟&age=30');

 

 

 

封装一个ajax函数

 

function ajax(method, url, data, success) {

var xhr = null;

try {

xhr = new XMLHttpRequest();

} catch (e) {

xhr = new ActiveXObject('Microsoft.XMLHTTP');

}

if (method == 'get' && data) {

url += '?' + data;

}

xhr.open(method,url,true);

if (method == 'get') {

xhr.send();

} else {

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

xhr.send(data);

}

xhr.onreadystatechange = function() {

if ( xhr.readyState == 4 ) {

if ( xhr.status == 200 ) {

success && success(xhr.responseText);

} else {

alert('出错了,Err：' + xhr.status);

}

}

}

}

使用

 

ajax('get','getNews.php','',function(data) {

var data = JSON.parse( data );

var oUl = document.getElementById('ul1');

var html = '';

for (var i=0; i<data.length; i++) {

html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';

}

oUl.innerHTML = html;

});