ajax的原理及使用详解

关于ajax的使用

1.ajax是什么？它有什么用？
简单理解::ajax是异步jscript脚本的意思
a表示异步
j表示jscript
x表示xml
因为普通页面刷新一次必须向服务器请求全部的页面;如果使用异步请求,每次可以向服务器请求很少量的需要更新的数据,这样可以减轻服务器的负担,并且可以让web页面有应用程序的效果和相应特征,给用户更好的体验,比如gmail和google的map
详细说明: AJAX全称“Asynchronous JavaScript and XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。它有机地包含了以下几种技术： 基于web标准（standards-based presentation）XHTML+CSS的表示； 使用 DOM（Document Object Model）进行动态显示及交互； 使用 XML 和 XSLT 进行数据交换及相关操作； 使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一起。
类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一系列相关的技术。事实上，一些基于AJAX的“派生/合成”式（derivative/composite）的技术正在出现，如“AFLAX”。

ajax优势
传统的web应用允许用户填写表单(form)，当提交表单时就向web服务器发送一个请求。服务器接收并处理传来的表单，然后返回一个新的网页。这个做法浪费了许多带宽，因为在前后两个页面中的大部分HTML代码往往是相同的。由于每次应用的交互都需要向服务器发送请求，应用的响应时间就依赖于服务器的响应时间。这导致了用户界面的响应比本地应用慢得多。与此不同，AJAX应用可以仅向服务器发送并取回必需的数据，它使用SOAP或其它一些基于XML的web service接口，并在客户端采用JavaScript处理来自服务器的响应。因为在服务器和浏览器之间交换的数据大量减少，结果我们就能看到响应更快的应用。同时很多的处理工作可以在发出请求的客户端机器上完成，所以Web服务器的处理时间也减少了。
2.ajax的使用步骤：
笼统地讲，ajax是javascript来实现的，除了向后台发送请求之外，与之前所学的php语言并无太大的联系。
以请求方式为get的代码为例，可以对ajax的具体功能做进一步的详解。
（1）此代码用于实现用户名验证
（2）在分析代码之前首先应该知道我们想要实现什么功能：这个html页面是用户在向服务器发送注册请求后，由服务器向客户端返回的一个注册页面。而我们想通过ajax来实现一个简单功能：
<1>当用户输入想要注册的用户名后，在鼠标焦点从username框移出时，就能使 服务器获取用户输入的数据；
<2>将该数据与数据库（假如有的话）相比较，并且判断出来该数据是否合法；
<3>由服务器返回相应的提示信息而且能由客户端渲染到该界面上。
（3）作为前端人员我们仅仅需要关注如何使服务器获取该数据，以及如何将服务器返回的信息渲染给用户（这也正是ajax所做的事情）。至于数据在后台的判定则不需要我们去掌握。

aaa 用户名： 昵称： 密码：

创建异步对象的方法是固定的，相当于在js中创建了一个名字为xhr的对象，从而在后续可以调用该对象的方法和属性。对象的属性和方法的调用均是通过obj.value 的方式进行调用。
// 2.2 设置 请求行 open(请求方式，请求url):
// get请求如果有参数就需要在url后面拼接参数，
// post如果有参数，就在请求体中传递
此处为什么要传递参数？因为用户在该username框中输入数据，我们需要向后台提交用户输入的数据，从而实现用户名与数据库数据的对比。而该数据正是name变量。

        xhr.open("get","validate.php?username="+name);

1.在js语法中 +号两边如果有字符串就相当于拼接字符串。通过这种方式依然实现了前台数据向服务器的发送；
2.此处打开php代码，（只要我们后面请求报文的格式设置正确）其实已经将用户数据以get方式进行了提交，并且通过该php代码进行了验证，而且输出了提示信息；
3.这部分是在后台已经完成，而我们接下来要做的就是如何接收服务器返回的信息（设置正确的响应报文格式），并且将该信息渲染给用户看。
// 2.3 设置 请求头 setRequestHeader(‘key’:‘value’)
// get方式不需要设置请求头
// post需要设置 Content-Type:application/x-www-form-urlencoded
// 2.4 设置 请求体:发送请求 send(参数：key=value&key=value)
// 如果有参数，post应该在这个位置来传递参数
// 对于 get请求不需要在这个位置来传递参数
xhr.send(null);

        // 响应报文：
        // 报文行：响应状态码 响应状态信息  200 ok
        // 报文头：服务器返回给客户端的一些额外信息  
        // 报文体：服务器返回给客户端的数据 responseText:普通字符串  responseXML：符合xml格式的字符串
        // xhr.status:可以获取当前服务器的响应状态  200 》成功
        console.log(xhr.status);
        // 一个真正成功的响应应该两个方面：1.服务器成功响应  2.数据已经回到客户端并且可以使用了
        // 监听异步对象的响应状态 readystate
        // 0:创建了异步对象，但是还没有真正的去发送请求
        // 1.调用了send方法，正在发送请求
        // 2.send方法执行完毕了，已经收到服务器的响应内容--原始内容，还不可以使用
        // 3.正在解析数据
        // 4.响应内容解析完毕，可以使用了
        xhr.onreadystatechange = function(){
            if(xhr.status == 200 && xhr.readyState == 4){
                console.log(xhr.responseText);
                console.log("-----------");
   document.querySelector(".showmsg").innerHTML = xhr.responseText;

xhr.responseText：是通过调用xhr对象的responseText方法来获取服务器给我们返回的提示信息。
将其赋值给文本框的内容进行输出。
}
}
};

3.关于ajax的封装； 通过以上步骤的分析，我们很清楚的可以看到，ajax在生成动态信息的过程中实际上只做了四件事 （1）通过new获取一个xhr对象； （2）通过open方法来打开服务器的相关php文件，可以理解为打开服务器的一个开关，可以接受客户端的参数并进行相应处理； （3）通过send方法来传递参数； （4）最后将服务器的返回内容传递给用户。 所以在我们进行函数封装时只用考虑这四个功能即可。 4.ajax函数的初步封装： // type:请求方式 即ajax向服务器发送请求的方式 // url:请求url ajax需要请求的服务器的php文件，通过该php文件进行相关信息的判断，并返回result // data:传递给服务器的参数 在js中使用对象形式传递数据最为方便。如果服务器返回的是一个array数组，则可以通过{“key”: ”array”} 的方式将数组转化为对象形式； // callback:客户端的动态结构的渲染方式 后续可采用引擎模板的形式进行结构的快速生成；

// 下面的封装方式的缺点：
// 1.参数数量固定：用户在调用的时候必须传入四个参数
// 2.参数的顺序固定：用户在调用的时候必须按照顺序进行参数的传递
// 3.不方便后期封装功能的扩展与修改
// function ajax(type,url,data,callback){}

// 解决方式：通过传入对象的方式来设置参数
// option是一个对象，它里面包含着相关的属性：如type,url,data,callback
// 不方便后期功能的添加与扩展
// 会造成当前文件中存在着大量的全局变量，会造成全局变量污染
// function ajax(option){}
// function get(option){}
// function post(option){}
// 建议的封装方式：
注意：此处$是一个变量，
var $ = {
// 将{“name”:“jack”,“age”:20} 的参数要转换为 ?name=jack&age=20
getpa:function(data){
if(data && typeof data == “object”){
var str = “?”;
for(var key in data){
str = str + key + “=” + data[key] + “&”;
}
str = str.substr(0,str.length-1);
}
return str;
},
// option.type:请求方式
// option.url:请求的url
// option.data:当前请求所传递的参数:规定参数必须是以对象的形式传递{“name”:“jack”,“age”:20}
// option.success:渲染方式
ajax:function(option){
// 接收用户参数进行相应处理
var type = option.type || ‘get’;
// location.href 可以获取当前文件的路径
var url = option.url || location.href;
// 接收参数:在js中最方便收集的数据类型为对象，所以我们就规定传递的参数必须是对象
var data = this.getpa(option.data) || “”;
// 响应成功之后的回调
var success = option.success;

    // 创建异步对象
    var xhr = new XMLHttpRequest();

    // 让异步对象发送请求
    // 请求行
    if(type == "get"){
        // 拼接参数
        url += data;
        data = null;
    }
    xhr.open(type,url);
    // 请求头
    if(type == "post"){
       xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    }
    // 请求体
    xhr.send(data);

    // 让异步对象接收响应
    xhr.onreadystatechange = function(){
        // 一个成功的响应有两个条件：1.服务器成功响应 2.数据解析完毕可以使用
        if(xhr.status == 200 && xhr.readyState == 4){
            // 接收响应的返回值
            // responseText   responseXML
            var rh = xhr.getResponseHeader("Content-Type");
            // 判断
            if(rh.indexOf("xml") != -1){
                var result = xhr.responseXML;
            }else if(rh.lastIndexOf("json") != -1){
                var result = JSON.parse(xhr.responseText);
            }else{
                var result = xhr.responseText;
            }

            // 接收数据之后，调用回调函数
            success && success(result);
        }
    }

},
5.jquery的ajax
jQuery的ajax是由jQuery帮我们封装好的一个方法。在jquery中ajax属于$对象的一个方法，所以在调用形式为：
$.ajax();
此时ajax作为一个函数，它的形参是一个对象，因此在使用该函数时应传入相应的实参。
$.ajax({
type:请求方式 即ajax向服务器发送请求的方式
url:请求url ajax需要请求的服务器的php文件，通过该php文件进行相关信息的判断，并返回result
data:传递给服务器的参数 在js中使用对象形式传递数据最为方便。如果服务器返回的是一个array数组，则可以通过{“key”: ”array”} 的方式将数组转化为对象形式；

timeout:设置响应过程的最长时间，超过该限制即为相应失败，单位为毫秒；
dataType:设置客户端接收服务器的数据类型，常用的有json xml text jsonp等等；
Success:function(){} 响应成功时执行的函数；
error:function(){} 相应失败时执行的函数；
complate : function(){} 无论响应是否成功均会执行的函数，常用于变量的释放。
})