ajax

作者: 写java的逗比叫z1 | 来源:发表于2016-11-28 22:35 被阅读62次

    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;
    }
    
    1. 打开与服务器的连接
    xhr.open(method,url,true)
    

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

    1. 设置回调函数
    • 为onreadystatechange事件绑定函数
    xhr.onreadystatechange = function(){
            if (xhr.readyState==4 && xhr.status == 200) {
                var data = xhr.responseText();
            }
    }
    
    • 响应内容可以是字符串, 也可以是xml内容
    1. 发送请求
    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/

    相关文章

      网友评论

        本文标题:ajax

        本文链接:https://www.haomeiwen.com/subject/yjaopttx.html