关于ajax的那些事

什么是ajax

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

Ajax包含下列技术：
基于web标准（standards-basedpresentation）XHTML+CSS的表示；
使用 DOM（Document ObjectModel）进行动态显示及交互；
使用 XML 和 XSLT 进行数据交换及相关操作；
使用 XMLHttpRequest 进行异步数据查询、检索；
使用 JavaScript 将所有的东西绑定在一起。

为什么使用ajax

Ajax应用程序的优点：
1. 通过异步模式，提升了用户体验
2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
3. Ajax引擎在客户端运行，承担了一部分本来由服务器承担的工作，从而减少了大用户量下的服务器负载。

ajax的缺点
1、ajax不支持浏览器back按钮。
2、安全问题 AJAX暴露了与服务器交互的细节。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。

AJAX最大的特点

Ajax可以实现动态不刷新（局部刷新）
就是能在不更新整个页面的前提下维护数据。这使得Web应用程序更为迅捷地回应用户动作，并避免了在网络上发送那些没有改变过的信息。

什么是XMLhttprequest对象

Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入，它是一种支持异步请求的技术。简而言之，XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。通过XMLHttpRequest对象，Web开发人员可以在页面加载以后进行页面的局部更新。

XMLHttpRequest对象的常用方法和属性

open(“method”,”URL”) 建立对服务器的调用，

第一个参数是HTTP请求方式可以为GET，POST或任何服务器所支持的您想调用的方式。
第二个参数是请求页面的URL。
send()方法，发送具体请求
abort()方法，停止当前请求
readyState属性请求的状态有5个可取值0=未初始化，1=正在加载
2=以加载，3=交互中，4=完成
responseText 属性服务器的响应，表示为一个串
reponseXML 属性服务器的响应，表示为XML
status 服务器的HTTP状态码，200对应ok 400对应not found

示例：

<script type="text/javascript">
  //实例化内建对象
    var xhr = new XMLHttpRequest()
    //发起一个请求
    xhr.open('get','index.php');
    //请求头 get请求可以省略
    xhr.setRequestHeader('get','index.php');
    //post情况下这步需要这样写
    /*xhr.setRequestHeader('Content-type','application/x-www=form-urlencoded');*/
    //请求主体
    xhr.send(null);
    //监听接收服务器请求状态
    xhr.onreadystatechange = function(){
        //判断请求状态和服务器的状态码
        if(xhr.readyState = 4 && xhr.status == 200){
            var result = document.querySelector('.result');
            result.innerHTML = xhr.responseText;
        }
    }
    
</script>

jQuery中的Ajax

jQuery为我们提供了更强大的Ajax封装

$.ajax({}) 可配置方式发起Ajax请求

$.get() 以GET方式发起Ajax请求

$.post() 以POST方式发起Ajax请求

$('form').serialize() 序列化表单（即格式化key=val&key=val）

url 接口地址

type 请求方式

timeout 请求超时

dataType 服务器返回格式

data 发送请求数据

beforeSend: function () {} 请求发起前调用

success 成功响应后调用

error 错误响应时调用

complete 响应完成时调用（包括成功和失败）

关于ajax的那些事

什么是ajax

为什么使用ajax

AJAX最大的特点

什么是XMLhttprequest对象

XMLHttpRequest对象的常用方法和属性

jQuery中的Ajax