学习jQuery第六天

什么是ajax? 用来做数据交互使用的
其原理: 通过XmlHttpRquest对象来向服务器发送异步请求的,从而从服务器中获得数据后,然后用js来操作DOM来更新页面
简单来说: 用于后台与服务器交互数据,这就能实现可以在不重新加载整个网页的情况下,对网页的部分进行更新
ajax的核心: 就是js对象 XmlHttpRequest
特点: 异步加载, 局部更新
异步: 一次一堆, 前一个没有完成, 后一个也能开始
同步: 一次一个, 前一个没有完成, 后一个不能开始
ajax给我们带来的好处: 1.页面无刷新, 在页面与服务器通信时,提高用户的体验…
注意: 凡是涉及到ajax的访问, 不能使用文件协议(已文件的方式访问)

1.创建XmlHttpRequest对象---> 用于与服务器交换数据的 ---> 相当与创建http请求的一个对象
    var xhr = new XMLHttpRequest();
    console.log(xhr.readyState);//0 请求未初始化
    
2.规定请求的类型(get , post),url地址,以及是否异步处理请求(布尔值),默认异步true
   open()-->相当与服务器建一个特定端口的链接
    xhr.open('get','./test.txt');
    console.log(xhr.readyState);//1 服务器连接以建立
    
3.将请求发送到服务器,开始请求  send()
    xhr.send();
    console.log(xhr.readyState);//1 服务器连接以建立

4.等待响应,---> 因为不知道服务器什么时候才能返回我们需要的响应,要采用事件的机制去触发
    xhr.onreadystatechange = function () {
        //这个不是在响应时触发,在状态改变时触发
        console.log(this.readyState);//2,3,4
        //当响应已经就绪,则可以获取响应后的数据
        if (this.readyState == 4){
            console.log(this.responseText);//获取响应的文本
            document.getElementsByTagName("body")[0].innerHTML=this.responseText;
        }
        
        switch (this.readyState){
        case 2://请求已经接受
            //获取响应报文里的响应头
            console.log(this.getResponseHeader("server"));
            console.log(this.getAllResponseHeaders());//获取全部的响应头
            console.log(this.responseText);//不能获取响应类容
            break;
        case 3://请求处理中: 可能内容不完整
            console.log(this.responseText);//获取响应类容
            break;
        case 4://整个响应的类容已经完整的下载下来了
            console.log(this.responseText);//获取响应类容
            break;

    }
    }

get请求: 基本用于从服务器获取数据,参数的传递都是通过url地址中的 ? 后面传递的
post请求: 一般都是业务数据,即表单提交,用户名登录,post也可以用来获取数据

ajax的应用: 是在浏览器与服务器之间异步加载数据的
$.load() : 从服务器加载数据
load()语法:  $(selector).load(url, [data], function(response, [status], [xhr]){   })
jQuery中的语法:
$.ajax({
      url:"请求的地址",
      type:"请求的类型" get/post,
     data:"要发送到服务器的数据",
       dataType:"要求服务器返回的数据类型",
        async:"请求是否异步处理,默认是异步",
      success:function(){},
           error:function(){}
    })