ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

ajax-原生js

    //1.创建对象
     var http = new XMLHttpRequest();
     //2.建立服务器连接
     http.open("get", "./data/student.txt");
     //3.发送请求
     http.send();
     //4.服务器响应
     http.onreadystatechange = function () {
     //5.界面的渲染
     //判断   获取最终读取完成状态
     if (http.readyState == 4) {
     //返回的数据都是string
     //console.log(typeof http.responseText);
     console.log(http.response);
     //字符串类型的json数据转化为对象型json  JSON.parse()
     var data = JSON.parse(http.response);
     console.log(data);
     //对象json转化为string json  JSON.stringify
     //var strdata=JSON.stringify(data);
     //console.log(strdata);
     }

以下代码为原生js封装ajax

    function method(meth, url, data, async, callback) {
        //对象的创建
        var http = new XMLHttpRequest();
        //判断
        if (meth == "get") {
            //get 传递的数据在路径的后边  www.baidu.com?name=1&s=2
            if (data) {
                url += "?";
                url += data;
            }
            http.open(meth, url, async);
            http.send();
        }
        else {
            http.open(meth, url, async);
            //判断是否有数据
            if (data) {
                http.send(data);
            }
            else {
                http.send();
            }
        }
        //响应
        http.onreadystatechange = function () {
            //状态的判断
            //状态码  200 success  500  服务器报错 404  服务器端页面丢失
            if (http.readyState == 4 && http.status == 200) {
                //将请求的数据返回
                callback(http.response);
            }

        }
    }
    //原生js 尽量不要同步  因为原生js是单线程的  会造成线程堵死

ajax-jQuery

jQuery将ajax封装成ajax()方法，使得使用起来更加方便

$.ajax({ 
		//默认值: 当前页地址。发送请求的地址。
		url: "test.html",
		//默认值: "GET")。请求方式 ("POST" 或 "GET")
		 type:"get",
		  //发送到服务器的数据。将自动转换为请求字符串格式。
		  data:{},
		 context: document.body,
		 //请求成功后的回调函数 
		 success: function(){
        $(this).addClass("done");
      }});