Foundation of Ajax

前言

每一个人在学习JavaScript中都会有一道坎，那便是今天的主题：Ajax。
一年前，我真的时候我才接触了这个东西，但是觉得真的蛮难的，不是很理解这其中的原理。
直到今年我才有写过涉及Ajax的代码

知其所以然

首先，先解释一下，为什么出现AJAX？很久很久以前，在表单验证的过程中，都必须按下提交按钮
才能将数据进行后台验证，所以造成的一个结果就是：万一这个用户名是注册过的，页面会自动刷新
，所有信息都要重新填写一遍；所以为了防止不断的刷新、验证，拿起键盘砸电脑的行为。Ajax出现了。
Ajax是Asynchronous JavaScript and XML缩写。这一技术能向服务器请求数据而无需刷新页面，当然
会带来良好的用户体验。

Ajax的核心是JavaScript中的一个对象XMLHttpRequest,该对象帮我们将数据发往服务器和解析服务器响应。
当然，这个对象有一定的兼容问题，只要是IE7+才能使用我以下的原生方法，现在你也不用考虑这么多了，你可以使用jQuery
封装好的ajax方法。

以下是原生方法：

var XHR = new XMLHttpRequest();

都说了，其核心就是这个对象。想将数据发往后台处理，我们就要创建一个XMLHttpRequest帮助我们造一条能通完后台的路。
这个对象上有许多属性和方法，主要用到两个方法。

open方法

open(method,url,async)

• methd 请求所用的HTTP方法。如果不能理解，就想想表单提交当中是不是也有同样的属性，是一样。
• url 该请求所要访问的URL。就是要将数据提交到的目的地。
• async 这是一个布尔参数。true（异步）false（同步）。当然你要使用Ajax时这里一定要true。

send方法

send(string)

• 将请求提交到服务器
• string 仅用于POST请求

你要使用该对象实现同步的方法也是可以的。

// HTML  代码
// <div id="test"></div>
XHR.opend("get","ajax_test.php",false);
XHR.send();  // 执行到这里的时候，整个页面卡住等待服务器的响应
doucument.getElementById("test").innerHTML = XHR.responseText
// PHP代码
// echo "我是服务器返回的文字"

onreadystatechange 事件

我们整个Ajax要做就是：将数据发送到服务器，服务器在响应回来响应的数据进行处理。
然而，我们怎么样才能得到监听响应呢？
因为XMLHttpRequest状态都由readyState记录着，每一次改变都会触发onreadystatechange。

XHR.onreadystatechange = function(){
     if(XHR.readyState == 4 && XHR.status == 200){
        doucument.getElementById("test").innerHTML = XHR.responseText
     }
}

补：还记得当初上过的计算机网络吗？TCP连接是经历了三次握手建立起来的。每一次
的握手，在报文里有一部分字段信息来说明当前连接情况。同理，XMLHttpRequest的readyState
属性记录着其的状态。而readyState的每一次的改变，都会触发onreadystatechange
事件。

XMLHttpRequest三个重要属性(补)

1. onreadystatechange:事件（存储函数），每当readyState属性改变时，就会调用该函数。
2. readyState:XMLHttpRequest的状态。从0到4发生变化。

• 0：请求未初始化
• 1：服务器链接已建立
• 2：请求已接收
• 3：请求处理中
• 4：请求已完成(响应就绪)

3. status:响应状态码

• 200 ： "OK"
• 404 : "not found"

总结

使用Ajax就是在页面刷新的状态下，与服务器进行数据的交流。

// 原生
    var XHR = new XMLHttpRequest();
    XHR.onreadystatechange = function(){
        if(XHR.readyState == 4 && XHR.status == 4){
            doucument.getElementById("test").innerHTML = XHR.responseText
        }
    }
    // GET
    XHR.open("GET","ajax_test.php?name=baiji",true)
    XHR.send()
    
    // POST
    XHR.open("POST","ajax_test.php",true)
    XHR.setRequestHeader("Content-Type","application/xxx-form-urlencoded")
    XHR.send(name=baiji)

当然你也可自己封装ajax函数或者使用jQuery的ajax

/*
    先定义调用方式
    ajax({
      url:"getData.php",
      type:"get",
      data:{
        name:"baiji"
      },
      success:fn,
      error:fn
    })
*/

    function ajax(opts){
        var XHR =new XMLHttpRequest();
        
        XHR.onreadystatechange = function(){
            if(XHR.readyState == 4){
                if(XHR.status == 200){
                    opts.success(XHR.responseText)
                }else{
                    opts.error();
                }
            }
        }
        
        var dataStr = "";
        
        for(var key in opts.data){
            dataStr += key+"="+opts.data[key]+"&";
        }
        
        dataStr = dataStr.substring(0,dataStr.length-1);
        var type = opts.type.toLowerCase();
        
        if(type === "get"){
            XHR.open(type,opts.url+"?"+dataStr,true);
            XHR.send();
        }
        
        if(type === "post"){
            XHR.open(type,opts.url,true);
            XHR.setRequestHeader("Content-Type":"application/xxx-form-urlencoded");
            XHR.send(dataStr);
        }
        
    }

当然你可以选择最简单的方便的jQuery，更多用法请自行查看API。

    $.ajax({
        type:"GET"，
        url:"getData.php"
    })

上述都是我自己理解的Ajax，因为一直没有很好的状态去做项目或者也没有什么好的项目让自己用点心去做。期望自己调整好状态吧，我现在回头看看才发现写完这篇博客，一天的书有没有看啦！！！

---

本文章著作权归白小霁所有，转载须说明来源