原生 Ajax与 jQery中对ajax的封装

目录

前言：

1、同步：客户端程序在运行时需要等到服务器端的响应数据后才执行下一步的操作。体现是客户端的页面会整体刷新

2、异步：客户端程序在运行时不需要等到服务器的响应数据，程序的主流程不停止，当服务器的响应数据过来后，只需要调用回调函数即可。体现是客户端的页面只进行局部刷新

3、同源和跨域

一、 什么是Ajax：Asynchronous JavaScript And XML，异步的JavaScript的XML支持

二、Ajax的实现

​ （1）创建ajax的核心对象：XMLHttpRequest，使用该对象向服务器发起请求，是一个异步请求，实现页面的局部刷新

​ （2）XMLHttpRequest对象的属性：

​ （3）XMLHttpRequest对象的方法：

示例：通过XMLHttpRequest对象向服务器发起异步请求（其中存在对于跨域的设置）

跨域的设置：cors：在服务器端配置。

        三、总结：Ajax的实现过程 

​ （1）创建XMLHttpRequest对象：

​ （2）调用open函数建立和服务器的连接

​ （3）调用send函数发送请求

​ （4）监听状态的变化，执行对应回调函数

四、jQuery中对ajax的封装

示例如下：

---

---

前言：

1、同步：客户端程序在运行时需要等到服务器端的响应数据后才执行下一步的操作。体现是客户端的页面会整体刷新

​ 页面整体刷新：浏览器重新加载页面，页面中原有的数据被清空

2、异步：客户端程序在运行时不需要等到服务器的响应数据，程序的主流程不停止，当服务器的响应数据过来后，只需要调用回调函数即可。体现是客户端的页面只进行局部刷新

​ 页面局部刷新：只是改变页面中部分标签的内容

3、同源和跨域

（1）同源（Origin）：协议、域名、端口号相同就是同源。例如

​ 检测 http://www.a.com:8080/test/index.html 地址的同源

​ http://www.a.com/dir/path.html ——>成功，协议是http、域名是www.a.com、端口号8080

​ http://www.child.a.com/dir/page.html ——> 失败，非同源，域名不同

​ https://www.a.com/dir/page.html —>失败，非同源，协议不同

​ http://www.a.com:8089/test/index.htmo —->失败，端口号不同

（2）引入同源策略的原因：是浏览器的一种安全机制，即客户端的脚步(javascript程序)在没有明确授权的情况下时不能访问对方（服务器端）的资源。不受同源策略限制的操作：页面中的连接（超链接）、页面的重定向、表单提交

（3）跨域：只有协议、域名、端口号有一个不同就是跨域。

        产生跨域的原因：因为javascript的同源策略（JavaScript只能访问和操作自己域下的资源，不能访问和操作其他域下的资源）。

跨域的解决方案：

​ a、cors：服务器设置HTTP响应头中Access-Control-Allow-Origin值，解除跨域限制。限制是若在服务器端不做配置就无法跨域，严重依赖服务器端

​ b、jsonp：利用script标签具有跨域的特征，在本地的回调函数中实现跨域。

​ c、反向代理（Reverse Proxy）：在客户端独立的解决跨域问题

一、 什么是Ajax：Asynchronous JavaScript And XML，异步的JavaScript的XML支持

（1）xml：是一种前后端交互时使用的文件格式。用户可以自定义标签

​ （2）异步：客户端向服务器发起请求后不会等待服务器的响应(处理结果)，继续执行自己的流程；当服务器的响应信息到了后，调用客户端的回调函数，对响应信息进行处理即可。

​ （3）异步的优点：

        ​ a、减轻服务器的负担：

        ​ b、节省带宽

        ​ c、用户的体验感很好

​ （4）Ajax技术：不是新技术，只是对html、javascript、xml这些技术的整合，整合后可以实现页面的局部刷新。