ajax

1.JavaScript的ajax

ajax教程：http://www.runoob.com/ajax/ajax-tutorial.html

创建 XMLHttpRequest 对象

//实例
var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

   XMLHttpRequest 对象的 open() 和 send() 方法：

    open(method,url,async): 规定请求的类型、URL 以及是否异步处理请求。

1. method：请求的类型；GET 或 POST
2. url：文件在服务器上的位置
3. async：true（异步）或 false（同步）

     send(string): 将请求发送到服务器。

1. string：仅用于 POST 请求

GET 请求

xmlhttp.open("GET","/try/ajax/demo_get.php?t=" + Math.random(),true);
xmlhttp.send();

POST 请求

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

接收服务器响应

XMLHttpRequest 对象的 responseText 或 responseXML 属性。

responseText：	获得字符串形式的响应数据。
responseXML：	获得 XML 形式的响应数据。

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

//ajax 实例
function f1() {
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP")
    }
    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState==4 && xmlhttp.status==200){
            document.getElementById('check_name').innerText = xmlhttp.responseText
        }
    };
    var name = document.getElementById('username');
    xmlhttp.open("GET","/user/ajax?name="+name.value,true);
    xmlhttp.open("POST","/user/ajax",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("name="+name.value+"&title=123");
}


//获取XMLHttpRequest 对象
function xmlhttpRequest(){
    var xmlhttp;
    if (window.XMLHttpRequest) {
        xmlhttp = new XMLHttpRequest();
    }
    else {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlhttp
}

//ajax封装函数，xmlhttp:XMLHttpRequest 对象,func：处理响应的函数，url：请求的地址，method：请求方式，param：请求参数
function myajax(xmlhttp,func,url,method="GET",param="") {
    xmlhttp.onreadystatechange = func;
    xmlhttp.open(method,url,true);
    if (method == "POST"){
        xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    }
    xmlhttp.send(param);
}
//使用
window.onload = function () {
    var name_input = document.getElementById('username');
    name_input.onblur = function () {
       //正则验证，通过后再发ajax请求
        if (name_input.value == ''){
            document.getElementById('check_name').innerText = ''
        }
        else {
            var xmlhttp;
            xmlhttp = xmlhttpRequest()
            //get请求
            myajax(xmlhttp,function () {
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById('check_name').innerText = xmlhttp.responseText
                }
            },'/user/ajax?name='+name_input.value+'&t='+Math.random())
            //post请求
            myajax(xmlhttp,function () {
                if (xmlhttp.readyState==4 && xmlhttp.status==200){
                    document.getElementById('check_name').innerText = xmlhttp.responseText;         
                }
            },'/check_name','POST','name='+$(this).val()+'&t='+Math.random());
        }
    }
}

2.JQuery的ajax

jQuery ajax() 方法：http://www.runoob.com/jquery/ajax-ajax.html

jquery get()方法：

语法
$.get(URL,data,function(data,status,xhr),dataType)

URL	必需。规定您需要请求的 URL。
data	可选。规定连同请求发送到服务器的数据。
function(data,status,xhr)	可选。规定当请求成功时运行的函数。 额外的参数： data - 包含来自请求的结果数据 status - 包含请求的状态（"success"、"notmodified"、"error"、"timeout"、"parsererror"） xhr - 包含 XMLHttpRequest 对象
dataType	可选。规定预期的服务器响应的数据类型。 默认地，jQuery 会智能判断。

$.get('/user/ajax',{name:"myself",t:Math.random()},function (data,status,xhr) {
    alert(data+status);
    console.log(xhr);
})

jQuery post() 方法

语法
$(selector).post(URL,data,function(data,status,xhr),dataType)

$("input").keyup(function(){
    txt=$("input").val();
    $.post("demo_ajax_gethint.html",{suggest:txt},function(result){
        $("span").html(result);
    });
});