AJAX

AJAX

 1.AJAX的的概念与意义

  说到AJAX，那就不得不提AJAX的作用，提高用户体验。但是，这是大部分人片面的认为，大学里，每当讲师讲到Web时，不得不提一个理论，那就是以后的时代有非常大的可能就是大部分桌面软件会被浏览器替代掉，可能也将会抛弃掉电脑所带的硬盘，一切数据与服务都从互联网上获取。试想一下，这是一个很可怕的事情。在AJAX技术上，微软是第一个掌握核心技术的，但不知道什么原因，微软并没有注重他，将其搁置一旁，没有发现其巨大价值。而Google看到了其巨大前景，大力开发AJAX技术并推广。现在Google已经大大超越微软，这令微软感到恐惧，加大了AJAX技术的研发。这是为什么呢？试想一下，AJAX并不能提高客户端从浏览器端的下载速度，这也导致他只能让客户端的等待不让人觉得那么反感。可是随着技术的发展，这点迟早会被解决，手机端的5G技术只是个开始。那么，AJAX所能够实现或者带来的的技术发展将是巨大的，无可比拟的。这就是为什么微软对AJAX所带来的冲击有着如此的恐惧心理。

 2.AJAX的异步概念

  异步一般是同同步一起说的，首先呢异步时以字符为传输单位的，而同步呢是以桢，它传输的时候要求接受方和发送方的时钟是保持一致的。在AJAX上异步表示这样的意思，浏览器给了请求头，交给AJAX，AJAX拿着请求交给服务器等待响应回来，但是，浏览器不用等待这个结果，他可以在交给AJAX请求后接着干别的，不需要等待。而同步呢，表示浏览器将请求发到服务器端后需要等待响应回来才能接着干别的。如下图所示：

 3.AJAX所需技术

  AJAX并不是新技术，而是已有技术的组合。
  1.使用CSS和XHTML来表示。
  2.使用DOM模型来交互和动态显示。
  3.使用XMLHttpRequest来和服务器进行异步通信。
  4.使用javascript来绑定和调用。

 4.js的原生AJAX技术。

//1.创建Ajax对象
 var xhr = new XMLHttpRequest();
//2.监听响应完成得状态
//引擎状态一改变就触发该事
xhr.onreadystatechange = function(){
     //5.接收到响应数据
     if (xhr.readyState == 4 && xhr.status == 200){
          var text = xhr.responseText;
          alert(text);
     }
}
//3.绑定提交提交方式,提交地址,是否使用异步技术
xhr.open("get","/hello",true)
//4.发送请求
xhr.send();

 5.jQuery的AJAX技术。

  1.$.get()

$.get("/hi", "username=zhangsan", function (data) {
        $("#mydiv").html(data);
})

  1.$.post()

 $.post("/hi", "username=zhangsan", function (data) {
            $("#mydiv").html(data);
})

  1.$.ajax()(功能最全，最适合开发用)

$.ajax({
     url : "/hi",
     type : "get",
     data : "username=zhangsan",
      success : function (data) {
           $("#mydiv").html(data);
      },
      dataType : "text",
      error : function () {
            alert("遇到不可抗拒的问题~~请咨询百度...");
            location.href = "https://www.baidu.com";
       }
 })