初识ajax核心

传统页面交互中的问题

每一次浏览器与服务器进行通信都会导致整个页面的刷新，用户体验非常不好
Ajax使用了异步通信方式 传统页面交互是同步通信

异步是指发出数据后，必须等待响应结果，才可以发送下一条数据的通讯方式
是指发出数据后，不需要等待响应结果，可继续发送下一条数据的通讯方式

Asynchronous Javascript And Xml

Ajax由浏览器端发起与服务器交换少量数据并更新网页局部的网页异步通信技术

传统交互方式 

1.通过地址栏回车或提交表单发同步请求
2.服务器返回整个页面

Ajax方式

1.通过Ajax对象(js中的xmlHttpRequest对象)发送异步请求
2.服务器端返回少量数据实现局部刷新

第一步 
创建Ajax对象(XMLHttpRequest对象)
XMLHttpRequest是JavaScript中的一个对象
Ajax正式通过这个对象来和服务器通信的

<script>
    // 创建Ajax对象
   var xhr = new XMLHttpRequest();
   console.log(xhr);
</script>

XMLHttpRequest对象兼容问题
现代浏览器new XMLHttpRequest()
低版本IEnew ActiveXObject(“Microsoft.XML”)

考虑兼容问题之后的创建代码

<script>
          // 第一步：创建Ajax对象
          var xhr = null;
          if(window.XMLHttpRequest){
                 //现代浏览器
                 xhr = new XMLHttpRequest();
          }else{
                //低版本IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } 
</script>

第二步：连接服务器open()方法
<script>
         // 第一步：创建Ajax对象
          var xhr = null;
          if(window.XMLHttpRequest){
                 //现代浏览器
                 xhr = new XMLHttpRequest();
          }else{
                //低版本IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } 
         // 第二步：连接服务器
         xhr.open(“get”,”test.txt”,true);
</script>

open()方法参数
参数1:method请求方式(get/post)
参数2:请求地址(url)
参数3:anyscn是否异步(true/false)

第三步:发送请求send()方法
不传递参数的情况:
<script>
         // 第一步：创建Ajax对象
          var xhr = null;
          if(window.XMLHttpRequest){
                 //现代浏览器
                 xhr = new XMLHttpRequest();
          }else{
                //低版本IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } 
         // 第二步：连接服务器
         xhr.open(“get”,”test.txt”,true);
         // 第三步：发送请求
         xhr.send(null);
</script>

第三步 ：发送请求send()方法
传递参数的情况 
当请求方式为get时，open中的url拼好参数， send中不传参数。

<script>
         // 第一步：创建Ajax对象
          var xhr = null;
          if(window.XMLHttpRequest){
                 //现代浏览器
                 xhr = new XMLHttpRequest();
          }else{
                //低版本IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } 
         // 第二步：设置请求
         xhr.open(“get”,”test.txt?user=li&geg=18”,true);
         // 第三步：发送请求
         xhr.send(null);
</script>

当请求方式为post时，open中不带参数，send中传入参数。
同时需要在send前设定Content-Type头信息
<script>
         // 第一步：创建Ajax对象
          var xhr = null;
          if(window.XMLHttpRequest){ 
                 xhr = new XMLHttpRequest();
          }else{ 
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
          } 
         // 第二步：设置请求
         xhr.open(“post”,”test.txt”,true);
         // 第三步：发生请求
          xhr.setRequestHeader("Content-Type","application/x-www-form- 
                       urlencoded;charset=UTF-8");
         xhr.send(“user=li&aeg=18”);
</script>


第四步:监听服务器，设置回调函数接收数据
<script>
     //第一步：创建Ajax对象
     var xhr = null;
     if(window.XMLHttpRequest){ 
        xhr = new XMLHttpRequest();
     }else{ 
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
     } 
    //第二步：连接服务器
    xhr.open("get","test.txt",true);
    //第三步：发送请求
    xhr.send(null);
   //第四步：监听服务器的响应 
   xhr.onreadystatechange = function(){
        if(xhr.readyState==4 && xhr.status == 200){
             console.log(xhr.responseText);
        } 
   };
</script>

onreadystatechange事件：每当通讯状态(readyState)改变时触发回调函数执行

如何监听请求响应是否正常

readyState属性:记录ajax通讯状态码
status属性：记录服务器执行状态码
状态码:是用来表示网页请求响应过程中各种状态的编码

readyState属性

readyState存有ajax通讯状态码
一共有五种状态，从0到4发生变化
0：表示请求未初始化
1：表示服务器连接已建立
2：表示请求已接收
3：请求处理中
4：请求已完成，且响应以就绪

status属性

status存有服务器执行状态码
200：表示执行成功
404：表示未找到页面
502：表示服务器内部错误

原生Ajax编程的四个步骤

step1 创建Ajax对象，处理兼容问题
step2 使用open方法连接服务器/设置参数
step3 使用send方法发送请求
step4 监听服务器，设置回调函数接收数据

1.原生Ajax代码比较复杂，容易写错
2.原生Ajax需要考虑浏览器兼容问题，jQuery Ajax为我们解决了这个难题
3.jQuery Ajax针对原生Ajax封装了几个方法，这些方法用起来非常简单，提高了开发的效率jQuery ajax是jQuery库里面封装好的几个方法，可以直接使用代替原生Ajax

jQuery ajax主要有以下几个方法 

1.$.ajax()最灵活 因为它的参数多
2.$.get() $.post() load()
3.jQuery.getJSON()、jQuery.getScript()

$.ajax()常用参数
$.ajax(
{
    url: “......”,
    type: “post”,
        dataType: “text”,
    data:
    success:
    error:
    async:
}
);
url 必需 规定将请求发送到哪个URL
type 可选 设置请求方式("POST"或"GET"),默认为"GET"
data Type 可选 规定预计的服务器响应的数据类型，默认为"text"
data 可选 连同请求发送到服务器的参数
success 可选 规定当请求成功时运行的函数
error 可选 请求失败时调用此函数
async 可选 默认值:true. 设置请求是否为异步，false为同步