原生Ajax和jQuery所封装的Ajax

Ajax的介绍

Ajax是一种用于创建快速动态网页的技术，通过在后台与服务器进行少量数据交换，ajax可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

比如，百度搜索是当输入一个字符之后 会实时显示出相关信息。以前Ajax使用xml格式的字符串进行数据交换，现在已经被JSON取代了。

XML可扩展标记语言，XML被设计用来传输和存储数据。XML和HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据

存储数据的类型

XML

Xml又叫可扩展标记语言，主要用来传输和存储数据，

xml和html类似，都是使用标签，不同的是html中都是预定义标签 标签嵌套标签

麻烦 已不常用

//获取xml数据
xhr.responseXML.getElementsByTagName("xml标签名")

json

使用数组存放多个对象，每个对象就是某条数据

需要将接送转换为js对象，JSON.parse(xhr.responseText)实现反序列化

同步和异步

同步：同步就是指一个进程在执行某个请求的时候，若该请求需要一段时间才能返回信息，那么这个进度将会一直等待下去，知道收到返回信息才继续执行下去，相当于就是客户端发送请求给服务端，在等待服务端响应请求时，客户端不做其他的事情。当服务器做完了才会返回到客户端，这样的话客户端需要一直等待，用户使用起来不友好，

异步：是指进程不需要一直等待下去，而是继续执行下面的操作，不管其他进程的状态，当有其消息返回时系统会通知进程进行处理，这样可以提高执行的效率。相当于客户端发给服务器请求时，在等待服务端相应的时候，客户端可以做其他的事情，这样节约了时间，提高了效率，

同步是阻塞模式，异步是非阻塞模式

同步好比是排队做核酸，需要一个做完才能给下一个做。而异步好比是你可以一边打游戏一边看电视，多个进程同时请求

Ajax特点

优点：

可以无需刷新页面，与服务器进行通信。

允许依据用户时间来更新部分页面内容

缺点：

没有浏览记录，不能回退

存在跨域问题（同源）

SEO不友好（搜索引擎优化，对爬虫不友好）

Ajax原理

客户端发送请求，请求交给XMLHttpRequest，XMLHttpRequest把请求提交给服务器，服务器进行业务处理，服务器响应数据交给XMLHttpRequest对象，XMLHttpRequest对象接收数据，由JavaScript把数据写到页面上

原生js Ajax

步骤

//第一步：创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
//第二步：告诉浏览器请求方式、地址、同步(false)或异步(true)
xhr.open("请求方式","接口地址","同步或异步");
//第三步：设置响应服务器端数据处理
//第一种、可执行多次 data 返回的数据
xhr.onreadystatechange = function(){
    //需要判断状态值是否到4
    if(xhr.status == 200 && xhr.readyState == 4){
        //请求成功所执行代码块
    }
} 
//第二种、只执行一次
xhr.onload = function(){
    //不需要判断状态值
}
//第四步：发送请求 传输参数也在其中写
xhr.send()

五个状态：

状态值0：未初始化状态

状态值1：初始化状态

状态值2：发送数据状态

状态值3：接受数据状态

状态值4：完成状态

常用方法

方法	描述
open(method,url,async)	请求的类型，url以及是否异步请求， method:请求的类型 GET或POST url:文件在服务器上的位置 async:true(异步)或false(同步)
onreadystatechange	存储函数或函数名，每当readyState属性改变时，就会调用该函数。
readyState	存有XMLHttpRequest的状态 从0到4发生变化 0:请求未初始化 1:服务器连接已建立 2:请求已接收 3:请求处理中 4:请求已完成，且相应已就绪
status	200:"ok" 404:未找到页面

jQuery封装的Ajax

$.ajax()

//格式：
$.ajax({
    async:true, //是否异步处理 默认true
    type:'get', //请求方式 get或post
    url:'接口地址', //接口地址
    dataType:'json',//数据类型
    success:function(res){} //请  求成功回调函数 res存储数据
    data:{} //传参
    error:function(err){}   //err请求失败返回
})

$.get({})和$.post({})

//get请求数据
$.get(地址,{data参数},回调函数,[dataType数据类型])
//post请求数据
$.post(地址,{data参数},回调函数,[dataType数据类型])
//data为返回的数据
$.get('/data/student.json', function (data) {})