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])。