ajax

1. 什么是Ajax?

asynchronized javascript and xml
ajax是一种用来改善用户体验的技术, 其实质是使用XMLHttpRequest对象异步的向服务器发送请求.

2.使用ajax技术的好处

• 浏览器可以从服务器同时请求多项内容
• 浏览器请求返回的速度会快很多
• 只有页面中真正改变的部分得到更新
• 会减少服务器的数据流量
• 用户可以在页面更新的同时继续工作
• 有些改变无需与服务器往返通信就可以处理
• 只有页面中真正的改变的部分得到更新(这是第二次出现, 因为实在是太重要了)
• 你的老板会更喜欢你

3. 什么是XMLHttpRequest?

XMLHttpRequest是大多数浏览器对请求对象的叫法, 可以把它发送到服务器并从服务器得到响应而无需加载整个页面.

4. 发送ajax请求的步骤?

1. 获取ajax对象.

function createXMLHttpRequest() {
    try {
        xhr = new XMLHttpRequest();
    } catch (tryMS) {
      try {
            xhr = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (otherMS) {
              try {
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
              } catch (failed) {
                    return null;
              }
           }
        }
        return xhr;
}

2. 打开与服务器的连接

xhr.open(method,url,true)

method: 请求方式(get/post)
url: 指定服务器资源
true: 请求是否为异步请求, true为异步

3. 设置回调函数

• 为onreadystatechange事件绑定函数

xhr.onreadystatechange = function(){
        if (xhr.readyState==4 && xhr.status == 200) {
            var data = xhr.responseText();
        }
}

• 响应内容可以是字符串, 也可以是xml内容

4. 发送请求

xhr.send(null)

参数: 请求体内容, get请求也必须给出null

• 如果是post请求, 需要在参数中给出请求的参数

5. jQuery中使用ajax

• jQuery.ajax()
  该方法是jQuery的底层实现
  参数:
  url: 发送请求的地址
  data: 发送到服务器的数据
  dataType: 服务器返回的数据类型
  可用值
• xml: 返回xml文档
• html: 返回html
• script: 返回js代码
• json: 返回json数据
• jsonp: 返回jsonp格式
• text: 返回字符串

$.ajax({
        url:'user/login.do',
        data:paramter,
        dataType:'json',
        type:'POST',
        success:callback
});

• jQuery.get()用于发送get请求
  该函数是简写的ajax函数, 等价于

$.ajax({
    url: url,
    data: data;
    success: success;
    dataType: dataType;
})

• jQuery.getJSON()发送get请求加载json数据
• jQuery.post() 发送post请求

参考资料

1. "Head First Ajax" Riordan著 中国电力出版社
2. http://www.w3school.com.cn/