ajax学习总结

1、什么是ajax？
ajax是一种可以不刷新页面，而实现与服务端通信的的方式，使用ajax的主要方式是XMLHttpRequest对象。
2、如何实现ajax通信？
window.onload = function(){
// 1.获取a节点，并为其添加点击事件
document.getElementsByTagName(“a”)[0].onclick = function() {
// 3.创建一个XMLHttpRequest对象
var requesr = new XMLHttpRequest();

    // 4.准备发送请求的数据：url
    var url = 'http://localhost:3000/';
    var method = "GET|POST"

    // 5.调用XMLHttpRequest对象的open（请求方式，请求地址）
    request.open(method, url);
    
    //post请求
    request.setRequestHeader("ContentType","appLication/x-www-form-urlencoded")

    // 6.调用XMLHttpRequest对象的send（）,send():发送请求
    request.send(null);

    //post请求
    request.send("name=atguigu")

    // 7. 为XMLHttpRequest对象添加onreadystatechange 响应函数
    request.onreadystatechange = function () {

    // 8.判断响应是否完成：XMLHttpRequest 对象的readyState 属性值为4的时候
    if(request.readyState == 4) {

      // 9.判断响应是否可用：XMLHttpRequest 对象status 属性为200
      if(request.status == 200 || request.status == 304) {

        // 10.打印响应结果：responseText
        alert(requset.responseText)
        // 11.html格式处理方式
        documnet.getElementById("details").innerHtml = request.responseText;
        
        // 12.XML格式处理方式：先创建对应的节点，再把节点插入到相应位置
        var name = result.getElementsByTagName('name')[0].firstChild.nodeValue;
        aNode.appendChild(document.createTextNode(name));

        // 13.json格式处理方式：后两个为json官方提供的方法
        var result = request.responseText;
        var objct = eval('(' + result + ')') || stringify() || parse()
        }
      }
    }
    // 2.取消a节点的默认行为
    return false;
  }
}

3、ajax传输数据的3种格式

3.1 XML：笨重，解析困难，但是通用性好（大家都认识这种格式）。
3.2 HTML：不需要浏览器解析就可以直接放到文档中，适合更新一部分区域。缺点是数据传输不方便，且HTML代码需要拼装完成。
3.3 JSON：小巧，有面向对象的特征，提供多种方法进行类型转换，是目前使用最多的一种格式。

4、使用jQuery完成ajax操作

4.1 $(“a”).load(url,[data],[callback]) : 可用于HTML文档的元素节点，把结果直接加为对应节点的子元素，通常而言，load方法加载后的数据是一个HTML片段。在只有一个参数的情况下，load方法默认使用get请求方式。
4.2 $.get(), $.post, $getJSON: 除去使用load方法的情况，大部分使用这3个方法。.get(url, [data], [callback], [type])， .post(url, [data], [callback], [type])， .getJSON(url, [data], [callback])。