AJAX详情介绍

前言                  

Ajax并不是一种新技术，而是整合了JavaScript、Xml、CSS等已有技术。虽然大部分

AJAX 不是一种新技术，而是一个在 2005 年被 Jesse James Garrett 提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括:

• HTML 或 XHTML
• CSS
• JavaScript
• DOM
• XML
• XSLT
• XMLHttpRequest

开发人员在过去使用过XMLHttp或者使用Iframe来加载数据，但仅到现在我们才看到传统的开发人员和公司开始采用这些技术。就像新的编程语言或模型伴随着更多的痛苦，开发人员需要学习新的技巧及如何最好利用这些新技术。

一、AJAX是什么？

基于XML的异步JavaScript，简称AJAX，全名Asynchronous JavaScript and XML（意思就是异步 JavaScript 和 XML，即用JavaScript执行异步网络请求。），是当前Web创新(称为Web2.0)中的一个王冠。

简历：

浏览器与服务器之间，采用 HTTP 协议通信。用户在浏览器地址栏键入一个网址，或者通过网页表单向服务器提交内容，这时浏览器就会向服务器发出 HTTP 请求。

1999年，微软公司发布 IE 浏览器5.0版，第一次引入新功能：允许 JavaScript 脚本向服务器发起 HTTP 请求。这个功能当时并没有引起注意，直到2004年 Gmail 发布和2005年 Google Map 发布，才引起广泛重视。2005年2月，AJAX 这个词第一次正式提出，它是 Asynchronous JavaScript and XML 的缩写，指的是通过 JavaScript 的异步通信，从服务器获取 XML 文档从中提取数据，再更新当前网页的对应部分，而不用刷新整个网页。后来，AJAX 这个词就成为 JavaScript 脚本发起 HTTP 通信的代名词，也就是说，只要用脚本发起通信，就可以叫做 AJAX 通信。W3C 也在2006年发布了它的国际标准。

二：优势

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

AJAX 通过在后台与服务器进行少量数据交换，可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

补：同步与异步的区别

同步

所有的操作都做完，才返回给用户。这样用户在线等待的时间太长，给用户一种卡死了的感觉（就是系统迁移中，点击了迁移，界面就不动了，但是程序还在执行，卡死了的感觉）。这种情况下，用户不能关闭界面，如果关闭了，即迁移程序就中断了。

异步
将用户请求放入消息队列，并反馈给用户，系统迁移程序已经启动，你可以关闭浏览器了。然后程序再慢慢地去写入数据库去。这就是异步。但是用户没有卡死的感觉，会告诉你，你的请求系统已经响应了。你可以关闭界面了。

总结：

同步，是所有的操作都做完，才返回给用户结果。即写完数据库之后，再响应用户，用户体验不好。
异步，不用等所有操作都做完，就相应用户请求。即先响应用户请求，然后慢慢去写数据库，用户体验较好。

三：工作原理

客户端发送请求，请求交给xhr，xhr把请求提交给服务，服务器进行业务处理，服务器响应数据交给xhr对象，xhr对象接收数据，由javascript把数据写到页面上。

四、具体步骤

1. 创建XMLHttpRequest对象， 也就是创建一个异步调用对象.
2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. 
3. 设置响应HTTP请求状态变化的函数. 
4. 发送HTTP请求. 
5. 获取异步调用返回的数据.
6. 使用JavaScript和DOM实现局部刷新.

7.  
   var xhr = null;
   xhr = new XMLHttpRequest()
   
   xhr.open('get', url, true)
   
   xhr.send(null);
   
   xhr.onreadystatechange = function(){
       if(xhr.readyState == 4){
           if(xhr.status == 200){
               success(xhr.responseText);
           } else {
       
           fail && fail(xhr.status);
           }
       }
   }

知识补充：

AJAX 通过原生的XMLHttpRequest对象发出 HTTP 请求，得到服务器返回的数据后，再进行处理。

XMLHttpRequest对象是 AJAX 的主要接口，用于浏览器与服务器之间的通信。尽管名字里面有XML和Http，它实际上可以使用多种协议（比如file或ftp），发送任何格式的数据（包括字符串和二进制）。

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数。

现在返回JSON的格式，需要进行转换（JSON.stringify）。

一旦拿到服务器返回的数据，AJAX 不会刷新整个网页，而是只更新网页里面的相关部分，从而不打断用户正在做的事情。

注意，AJAX 只能向同源网址（协议、域名、端口都相同）发出 HTTP 请求，如果发出跨域请求，就会报错。

通过$.ajax获取数据，例为get方法，如存在跨域问题，用

 headers:{
            'X-Client-Info': '   ',
            'X-Host': '     '
        }

进行跨域操作。

• $.ajax() 都可以发
• $.post(url,data,success,datatype):本质上只能发送post请求
• $.get(url,data,success,datatype):本质上只能发送get请求

总结