Asynchronous Javascript And XML （异步的JavaScript和XML）由下列技术组合而成

1.使用CSS和XHTML来表示
2.使用DOM模型来交互和动态显示
3.数据互换和操作技术，使用XML与XSLT
4.使用XMLHttpRequest来和服务器进行异步通信
5.使用javascript来绑定和调用

传统Web应用程序 VS 采用AJAX技术的Web应用程序主要差别：不是 JavaScript，不是 HTML/XHTML和 CSS，而是采用了 XMLHttpRequest 来向服务器异步的请求 XML 数据。

XMLHttpRequest对象的属性

XMLHttpRequest对象的方法

创建ajax的步骤

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。这其中最关键的一步就是从服务器获得请求数据。【原生创建ajax可分为以下四步,要记住】。

function ajax(url, success, fail){
    // 1. 创建XMLHttpRequest对象，创建连接
    var xhr = null;
    xhr = new XMLHttpRequest()
    
    // 2. 连接服务器
    xhr.open("get",demo.php?name=tsrot&age=24,true);
    //or xhr.open("POST",demo.php,true);
    //第一个参数表示请求类型的字符串，其值可以是GET或者POST
    
    // 3. 发送请求
    xhr.send();
    //一般情况下，使用Ajax提交的参数多是些简单的字符串，
    //可以直接使用GET方法将要提交的参数写到open方法的url参数中，此时send方法的参数为null或为空。
    
    // 4. 处理响应
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status == 200){
                success(xhr.responseText); 
                //responseText：获得字符串形式的响应数据,
                //可用JSON.parse(xhr.responseText)转化为JSON对象
                //responseXML: 获得 XML形式的响应数据
            } else { // fail
                fail && fail(xhr.status);
            }
        }
    }
    // readyState：ajax处理过程
    // 0：请求未初始化（还没有调用 open()）。
    // 1：请求已经建立，但是还没有发送（还没有调用 send()）。
    // 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
    // 3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响
    // 4：响应已完成；您可以获取并使用服务器的响应了。
    
    // status属性：
    // 200:"OK"
    // 404: 未找到页面
}

谈谈JSONP

JSONP是怎么产生的？Ajax直接请求普通文件存在跨域无权限访问的问题，不过我们又发现，Web页面上调用js文件时则不受是否跨域的影响，不仅如此，我们还发现凡是拥有"src"这个属性的标签都拥有跨域的能力，比如< script >、< img >、< iframe >。因此，想通过纯web端跨域访问数据就只有一种可能，那就是在远程服务器上设法把数据装进js格式的文件里，供客户端调用和进一步处理。JSON的纯字符数据格式可以简洁的描述复杂数据，JSON还被js原生支持。客户端在对JSON文件调用成功之后，也就获得了自己所需的数据。为了便于客户端使用数据，逐渐形成了一种【非正式传输协议】，人们把它称作【JSONP】，该协议的一个【要点】就是【允许用户传递一个callback参数给服务端】，然后服务端【返回数据】时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

一句话总结：作用：为了实现跨域请求，通过script标签实现跨域请求，然后在服务端输出JSON数据并执行回调函数，从而解决了跨域的数据请求。

简单例子

<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<script type="text/javascript">  
    function jsonpCallback(result) {  
        console.log(result);
        for(var i in result) {  
            console.log(i+":"+result[i]);  
        }  
    }  
</script>  
<script type="text/javascript" src="http://XXXXX.php?callback=jsonpCallback
&random=(new Date()).getTime()"></script>  
//callback参数指示生成JavaScript代码时要使用的函数jsonpcallback
//用XMLHttpRequest时，我们得到一个字符串,要用JSON.parse把字符串转化成对象。
//使用jsonp时，script标志会解析并执行返回的代码，等我们处理数据时，已经是一个JavaScript对象了

JS之Ajax

创建ajax的步骤