ajax

Ajax中post请求六部走
第一步：创建Ajax对象        W3C            IE
var xhr = new ActiveXObject('Microsoft.XMLHTTP') || XMLHttpRequest();
第二步：设置回调函数
xhr.onreadystatechange=function()
第三步：初始化Ajax对象
xhr.open('get','index1.php');
第四步：设置请求头信息
setRequestHeader('Content-type','application/x-www-form-urlencoded');
第五步：发送Ajax请求
xhr.send(要发送的参数);
第六步：判断与执行
if(xhr.readyState==4&&xhr.status==200){
    alert(xhr.responseText);
}

**************************************************************

ajax对象的创建
IE：

    var xhr=new ActiveXObject(‘Microsoft.XMLHTTP’);
w3c：

    var xhr=new XMLHttpRequest();

**************************************************************

常用方法
① open(method,url) ：初始化Ajax对象
参数说明：
method：请求方法，get请求或post请求
url：请求的url地址

② setRequestHeader(header,value) ：设置请求头信息

参数说明：
header：请求头参数
value：请求头的值

③ send(content) ：发送Ajax请求
参数说明：
content代表发送Ajax请求时所传递的参数或内容
如果是get请求，此参数为null
如果是post请求，此参数为要发送的数据

**************************************************************

onreadystatechange ：当Ajax状态码发生改变所触发的回调函数
readyState ：Ajax状态码
0：表示对象已建立，但未初始化  创建了Ajax对象，但是未调用open方法
1：表示对象已初始化，但未发送  调用了open方法，但未调用send方法
2：已调用send方法进行请求 调用send方法，但未接收到数据
3：正在接收数据（接收到一部分服务器端返回的数据）
4：接收完成 （当服务器端处理完所有数据）
status ：响应状态码，200（接收到数据） 404（未找到页面）
statusText ：响应状态文本（了解）
responseText ：响应文本（返回最终结果）
如果服务器端返回文本类型的数据，那么可以通过responseText进行接收
responseXML ：响应文本（返回最终结果）
如果服务器端返回XML格式的大批量数据，那么可以通过responseXML进行接收
**************************************************************
解决缓存问题
设置请求头
setRequestHeader("If-Modified-Since","0");    //不用缓存(用于get请求清除缓存)

**************************************************************

PHP解析XML
PHP DOM模型解析XML
$dom=new DOMDocument();
$dom->load($str);
$nd=$dom->getElementsByTagName(“TagName”);
$value=$nd->item(0)->nodeValue

PHP SimpleXML模型解析XML
$xml=simplexml_load_string($str);
$first = $xml->first;
$second= $xml->second;

**************************************************************

通过Javascript解析XML数据
var xml=xmlHttp.responseXML;
node=xml.getElementsByTagName(“TagName”);
node[0].childNodes[0].nodeValue;

childNodes属性：获取当前节点下的所有节点，返回数据为数组格式。

**************************************************************

setRequestHeader('Content-type','application/x-www-form-urlencoded');    //设置请求头

**************************************************************

Ajax中的json
例1：求两个数的四则运算
要用到的知识点：
在开发过程中，服务端返回的数据为string数据格式，所以如果使用json必须通过eval方法进行转化，但是json格式转化有点特殊，格式如下：
var json对象 = eval(‘(‘+json数据+’)’);

**************************************************************

ajax(post封装代码)

function post(url,canshu,hanshu,type){
    xhr = createXhr();
    xhr.onreadystatechange = function(){
        if(xhr.readyState==4){    
            if(xhr.status==200){
                switch (type){
                    case null:
                        hanshu(xhr.responseText);
                        break;
                    case 'text':
                        hanshu(xhr.responseText);
                        break;
                    case 'xml':
                        hanshu(xhr.responseXML);
                        break;
                    case 'json':
                        hanshu(eval('('+xhr.responseText+')'));
                        break;
                }
            }
        }
    }
    xhr.open('post',url);
    xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.send(canshu);
}

*************************************************************************

ajax(get封装)

function get(url,canshu,hanshu,type='json'){
    var xhr = createXhr();
    if(canshu!=null){
        url=url+'?'+canshu;
    }
    
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if(xhr.status==200){
                switch(type){
                    case null:
                        hanshu(xhr.responseText);
                        break;
                    case 'text':
                        hanshu(xhr.responseText);
                        break;
                    case 'xml':
                        hanshu(xhr.responseXML);
                        break;
                    case 'json':
                        hanshu(eval('('+xhr.responseText+')'));
                }
            }
        }
    }
    xhr.open('get',url);
    xhr.setRequestHeader('If-Modified-Since','0');
    xhr.send(null);
}