Ajax

Ajax不是一个新技术，而是多种技术的集合

Ajax： Asynchronous Javascript And Xml
全称：异步的JavaScript和XML数据交互技术
注：原始的Ajax技术中使用XML标记语言完成数据交互，但是标记语言中包含了大量的无效数据（标签），所以后来使用JSON数据代替XML进行数据传递

Ajax技术的核心

异步JavaScript对象：XMLHttpRequest
数据交互实体：JSON对象

Ajax技术的实现

1.JavaScript Ajax
2.jQuery Ajax：底层封装JavaScript Ajax，实现了简洁的调用
3.axios：底层通过Promise封装JavaScript Ajax，是西安了简洁同步调用

Ajax实现

创建后端服务应用(略)

前后端分离模式下，后端路由接收到请求，完成是数据处理后只响应数据，不再提供视图页面
创建一个index.html页面，通过ajax技术获取数据

<button>点击获取数据</button>
<script>let btn = document.querySelector('button')btn.onclick = function(){//创建JS异步对象let xhr = new XMLHttpRequest()//请求方式，请求地址xhr.open('get','http://localhost:3000/users')//发送请求xhr.send()//解析并渲染数据xhr.onreadystatechange = function(){if(xhr.readyState == 4 && xhr.status ==200) {//获得数据，DOM渲染let jsonObj = JSON.parse(xhr.responseText)console.log(jsonObj)}}}
</script>

注：服务器上默认同源策略限制，不允许不同服务器的请求访问数据
改造后端数据，添加同源策略配置，允许不同服务器获取数据

rouster.get('/user',async (req,res)=>{res.header('Access-Control-Allo-Origin','*')...
})

jQuery中的Ajax

1.$.get(url.[data],[callback],[type])

$.get()发送给一个get请求方式的ajax请求
url:必选参数，请求地址
data：可选参数，请求中附带的参数
callback: 可选参数，回调函数，请求成功后的处理函数
type：可选参数，返回数据的类型

2.$.post(url.[data],[callback],[type])

$.post()发送给一个get请求方式的ajax请求
url:必选参数，请求地址
data：可选参数，请求中附带的参数
callback: 可选参数，回调函数，请求成功后的处理函数
type：可选参数，返回数据的类型

3.$.ajax(url,[settings])

$.ajax()表示发送一个ajax请求
settings：请求中的配置项，如请求方式、请求参数、处理函数等

$(function(){$.get('http://localhost:3000/user',dat=>{console.log(dat)})
})

$(function() {// 2、使用$.ajax()获取数据$.ajax({url: "http://localhost:3000/user",type: "GET",success: function(data) {initArticle(data)},error: function() {console.log("请求发送失败")}})
})

跨域请求

1.什么是跨域
通过一个完整的网络请求，即URL地址，包含如下几个部分

http://www.example.com:80/index.html?name=zhangsan
http: 访问协议
www.exampe.com： 域名
：80 端口
/index.html 资源路径
?name=zhangsan : get参数

发起请求的HTML，工作的服务器和接收请求的后端项目，工作的服务器操作的协议、域名、端口其中有一项不同则称为跨域请求

2.什么是同源策略
由于数据安全问题，任何服务器默认情况下都是不允许、不支持跨域访问的，这种限制同源访问数据的策略称为同源策略

同源策略：
请求的一方，被请求的乙方，必须在同源模式（域名、端口、协议）下才能完成数据访问
不同域名、不同协议、不同端口的情况下，默认不允许完成数据请求

3.数据共享需求
尽管服务器通过同源策略，默认禁止跨域访数据的情况
但是很多时候网络上的某些数据，有共享的需求，这样的情况下需要包含数据的服务器支持数据访问，完成数据共享操作

4.跨域访问的实现

Json跨域，核心