Ajax的原理和应用

一、什么是AJAX

    AJAX（Asynchronous JavaScript and XML）异步的 JavaScript 和 XML，通过与后端接口交互，实现页面中局部刷新。

二、AJAX原理

    AJAX是通过XMLHttpRequest（所有现代浏览器均支持 XMLHttpRequest 对象，IE5 和 IE6 使用 ActiveXObject）与服务器交互，获取数据后通过javascript操作DOM来显示数据。

三、XMLHttpRequest对象

1、创建XMLHttpRequest对象

function createXHR(){
    var xmHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new window.XMLHttpRequest();
    }else{
        xmlHttp = new window.ActiveXObject(‘Microsoft.XMLHTTP‘);
    } 
    return xmlHttp;
}

2、向服务器发送请求

向服务器发送请求，要使用XMLHttpRequest的open和send方法

open()方法，规定请求的类型、URL、是否异步请求

open(method,url,async)

mehtod：请求的类型（POST或GET）

url：请求的URL

anync：是否是异步请求，true(异步)、false(同步)，默认为异步请求

send()方法，将请求发送到服务器

send(string)

string：仅用于POST请求，发送请求所带的参数

发送GET请求

var xmlHttp = createXHR();
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
        var result = xmlHttp.responseText;
        //对应的处理逻辑
    }
}
xmlHttp.open(‘GET‘,‘test.php?aa=aa&bb=bb‘,true);
xmlHttp.send();

发送POST请求

var xmlHttp = createXHR();
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
        var result = xmlHttp.responseText;
        //对应的处理逻辑
    }
}
xmlHttp.open(‘POST‘,‘test.php‘,true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlHttp.send(‘aa=aa&bb=bb‘);

使用POST方式发送请求时，需要设置http头信息，通过send方法传递要发送的参数

当请求是异步请求时 ，需要通过onreadystatechange事件注册一些响应后的操作，如果是同步请求，只需要在send方法后直接调用xmlHttp.responseText，不需要注册onreadystatechange

onreadystatechange：每当readyState发生改变时，都会触发该事件

readyState：存储XMLHttpRequest的状态，从0到4发生变化

• 0: 请求未初始化

• 1: 服务器连接已建立

• 2: 请求已接收

• 3: 请求处理中

• 4: 请求已完成，且响应已就绪

status：从服务器端返回的响应代码，比如200（就绪），404（未找到）

responseText：从服务器返回的字符串数据

responseXML：从服务器返回的XML数据，需要作为XML对象解析

四、完整实例

php代码，test.php

<?php
    $uname = $_GET(‘uname‘);    
    $age = $_GET(‘age‘);    
    $result = array(       
        ‘uname‘ => $uname,        
        ‘age‘ => $age    
    );    
    echo json_encode($result);
?>

javascript代码：

function createXHR(){
    var xmHttp = null;
    if(window.XMLHttpRequest){
        xmlHttp = new window.XMLHttpRequest();
    }else{
        xmlHttp = new window.ActiveXObject(‘Microsoft.XMLHTTP‘);
    }
    return xmlHttp;
}
var xmlHttp = createXHR();
xmlHttp.onreadystatechange = function(){
    if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
        var result = xmlHttp.responseText;
        alert(result);
    }
}
xmlHttp.open(‘GET‘,‘test.php?uname=kaixin&age=16‘,true);
xmlHttp.send();

本文出自 “我就是标准” 博客，请务必保留此出处http://liumanwei.blog.51cto.com/3005291/1437981

原文：http://liumanwei.blog.51cto.com/3005291/1437981