ajax总结

最新推荐文章于 2022-05-14 21:50:42 发布

原创最新推荐文章于 2022-05-14 21:50:42 发布 · 267 阅读

0 ·

CC 4.0 BY-SA版权

什么是ajax? ajax作用是什么？

ajax = 异步JavaScript 和XML。 ajax是一种用于创建快速网页的技术。通过后台与服务器进行少量数据交换。ajax可以说使网页实现异步更新。

ajax工作原理

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

为什么使用ajax

通过异步模式，提升了用户体验
优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用
ajax引擎在客户端运行，承担了一部分本来有服务器承担的工作，从而减少了大用户量下服务器负载

ajax最大的特点是

ajax最大的优点是不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容

XMLHttpRequest对象

ajax的核心是就JavaScript对象XMLHTTPRequest。它是一种支持异步请求的技术。XMLHTTPRequest可以使用JavaScript向服务器发起请求并处理响应，而且不阻塞用户。通过XMLHTTPRequest对象，web开发人员可以在页面加载以后进行页面的局部更新。

什么是JSON

JSON是一种轻量级的数据交换格式

处理服务器返回的json数据

在这里插入图片描述

ajax集中请求？它们的优缺点

常用的post， get， delete， put
代码上的区别：

get通过URL传递参数
post设置请求头，规定请求数据类型
使用上的区别：
post比get安全：因为post请求参数在请求体中， get参数在URL上面
get传输速度比post快，根据传参决定的：post通过请求体传参，后台通过数据流接受。速度稍微慢一些。而get通过URL传参可以直接获取
post传输文件大，理论上没有限制，get传输文件小，大概7-8k左右
get获取数据， post上传数据：上传的数据比较多，而且上传数据都是重要数据，所以不论在安全性还是数据量级上，post是最好的选择。

跨域解决方案

同源：协议域名端口号全部相同只要有一个不相同就是非同源策略
同源策略限制不同源会造成跨域。以下任意一种情况不同，都是不同源。

JSONP
原理：动态创建一个script标签，利用script标签的src属性不受同源策略限制。因为所有的src属性和href属性都不受同源策略限制。可以请求第三方服务器数据内容
步骤：（1）创建script标签（2）script的src属性设置接口地址（3）接口参数，必须要带一个自定义函数名，不然后台无法返回数据（4）通过定义函数名去接受后台返回数据

//创建一个script标签
var script  = document.createElement("script");
//script的src属性设置接口地址，并带一个callback回调函数名称
script.src = "http://127.0.0.1:8888/index.js?callback = jsonpCallback"
//插入到页面
document.head.appendChild(scipt);
//通过定义函数名去接收后台返回数据function jsonpCallback（data）{
//注意：jsonp返回的数据是json对象可以直接使用
//ajax取得数据是json字符串需要转换Jason对象才可以使用
}

2.CORS:跨域资源共享
原理：服务器设置Access-Control-Allow-OriginHTTP响应头之后，浏览器就会允许跨域请求

需要后台设置
Access-Control-Allow-Origin;  允许所有域名访问
Access-Control-Allow-Origin: http://a.com  只允许该域名访问

在这里插入图片描述

反向代理
window+iframe

XMLHTTPRequest对象的常用方法和属性

open(“method”, “url”)建立对服务器的调用，第一个参数是http请求方式，第二参数是请求页面的URL
send()方法，发送具体请求
abort()，停止当前请求
readyState属性请求的状态 0=未初始化， 1=正在加载， 2=以加载， 3=交互中，4=完成
responseText属性服务器的响应，表示为一个串
responseXML属性服务器的响应，表示为XML
status服务器的http状态码，

ajax都有哪些优点和缺点

1、最大的一点是页面无刷新，用户的体验非常好。
2、使用异步方式与服务器通信，具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本。并且减轻服务器的负担，ajax的原则是“按需取数据”，可以最大程度的减少冗余请求，和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术，不需要下载插件或者小程序。

ajax的缺点
1、没有浏览历史，不能后退
2、存在跨域问题

原生js发起ajax请求

//创建对象
const xhr = new XMLHttpRequest();
//初始化设置请求方法和URL(传递参数）
xhr.open('GET','http://127.0.0.1:8000/server?a=100&b=200');
//设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送
xhr.send();
//事件绑定，处理服务器返回的结果
xhr.onreadystatechange = function() {
	if(xhr.readyState === 4) {
		if(xhr.status >= 200 && xhr.status < 300) {
	}else {}
}