ajax知识梳理汇总
1、ajax
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
通过 AJAX 可以在浏览器中向服务器发送异步请求
1.1优点
无刷新获取数据。
1.2缺点
- 没有浏览历史，不能回退
- 存在跨域问题(同源)
- SEO （搜索引擎优化）不友好
1.3工作原理
2、xml
XML是可扩展标记语言，被设计用来传输和存储数据。
XML与HTML 类似，不同的是 HTML 中都是预定义标签，而 XML 中没有预定义标签，
全都是自定义标签，用来表示一些数据。
name = "小明" ; age = 18 ; gender = "男" ;
<student>
<name>小明</name>
<age>18</age>
<gender>男</gender>
</student>
现在已经被 JSON 取代了，
{"name":"小明","age":18,"gender":"男"}
3、chrome浏览器中
preview：对响应做一个预览
Response Headers：响应头
Request Header：请求头
Query String Parameters查询字符串参数
4、ajax使用
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新
4.1步骤
4.1.1、创建 XMLHttpRequest 对象
- var xhr = new XMLHttpRequest();
4.1.2、设置请求信息
- xhr.open(method, url);
//可以设置请求头，一般不设置
- xhr.setRequestHeader(‘Content-Type’,‘application/x-www-form-urlencoded’);
4.1.3、发送请求
- xhr.send(body) //get 请求不传 body 参数，只有 post 请求使用
4.1.4、 接收响应
//xhr.responseXML 接收 xml 格式的响应数据
//xhr.responseText 接收文本格式的响应数据
xhr.onreadystatechange = function (){
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}
btn.onclick=function()
{
//创建对象
const xhr =new XMLHttpRequest();
//初始化，设置请求方法和url
xhr.open('GET','http://127.0.0.1:8000/server');
//发送
xhr.send();
//事件绑定，处理服务端返回的结果
xhr.onreadystatechange=function()
{
//判断服务端返回了所有的结果
if(xhr.readyState===4)
{
//判断响应的状态码
//2xx都表示成功
if(xhr.status>=200&&xhr.status<300)
{
result.innerHTML=xhr.response;
console.log(xhr.status);
console.log(xhr.statusText);
}
}
}
}
4.2、readyState
readyState存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
4.3、onreadystatechange 事件
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
4.4、向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
4.5、open
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method：请求的类型；GET 或 POST
- url：文件在服务器上的位置
- async：true（异步）或 false（同步）
4.5.1、method
GET 还是 POST:
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
4.5.2、get请求
（a）、一个简单的 GET 请求：
xhr.open("GET","/try/ajax/demo_get.php",true);
xhr.send();
（b）、解决缓存问题
在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩
余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据 url 地址来记录的，所以我们只需要修改 url 地址，向 URL 添加一个唯一的 ID：
xhr.open("get","/testAJAX?t="+Date.now());
xhr.send();
（c）、携带参数
通过 GET 方法发送信息，请向 URL 添加信息：
xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send();
4.5.3、post 请求
（a）、一个简单 POST 请求：
xhr.open("POST","/ajax/demo_post.php",true);
xhr.send();
（b）、POST 数据
使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定发送的数据：
xhr.open("POST","/ajax/demo_post2.php",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");
setRequestHeader(header,value)向请求添加 HTTP 头。
- header: 规定头的名称
- value: 规定头的值
4.5.4、url
xhr.open("GET","ajax_test.html",true);
该文件可以是任何类型的文件，比如 .txt 和 .xml，或者服务器脚本文件，比如 .asp 和 .php （在传回响应之前，能够在服务器上执行任务）。
4.6、send
send(string) 将请求发送到服务器。
string：仅用于 POST 请求
4.7、json数据
创建serve.js
// 1. 引入express
const express = require('express');
// 2. 创建应用对象
const app = express();
// 3. 创建路由规则
app.get('/server', (request, response) => {
// 设置响应头 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应体
response.send("Hello Ajax");
});
// 4. 监听服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中...");
})
app.all('/json-server', (request, response) => {
// 设置响应头, 设置允许跨域
response.setHeader('Access-Control-Allow-Origin', '*');
// 设置响应头, 设置允许自定义头信息
response.setHeader('Access-Control-Allow-Headers', '*');
// 响应一个数据
const data = {
name: 'atguigu'
};
// 对 对象 进行 字符串 转换
let str = JSON.stringify(data)
// 设置响应体
response.send(str);
});
4.8、json数据
nodemon安装保存后可以自动运行
npm install nodemon -g
5、服务器 响应
- responseText 获得字符串形式的响应数据。
- responseXML 获得 XML 形式的响应数据。
5.1、请求超时与网络异常
// 超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){
alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
alert('网络异常，请稍后重试')
}
5.2、取消请求
// 手动取消
xhr.abort()
5.3、多次请求不重复请求
let isSending=false;
btn.onclick=function()
{
//创建对象
const xhr =new XMLHttpRequest();
//多次请求不重复请求
if(isSending)
xhr.abort();
//初始化，设置请求方法和url
isSending=true;
xhr.open('GET','http://127.0.0.1:8000/server');
//发送
xhr.send();
//事件绑定，处理服务端返回的结果
xhr.onreadystatechange=function()
{
//判断服务端返回了所有的结果
if(xhr.readyState===4)
{
//判断响应的状态码
//2xx都表示成功
if(xhr.status>=200&&xhr.status<300)
{
result.innerHTML=xhr.response;
console.log(xhr.status);
console.log(xhr.statusText);
isSending=false;
}
}
}
}
6、jQuery 中的 AJAX
6.1 get 请求
$.get(url, [data], [callback], [type])
- url:请求的 URL 地址。
- data:请求携带的参数。
- callback:载入成功时回调函数。
- type:设置返回内容格式，xml,html, script, json, text, _default。
6.2 post 请求
$.post(url, [data], [callback], [type])
- url:请求的 URL 地址。
- data:请求携带的参数。
- callback:载入成功时回调函数。
- type:设置返回内容格式，xml,html, script, json, text,
6.3、通用方法
$.ajax({
// url
url: 'http://127.0.0.1:8000/jquery-server',
// 参数
data: {a:100, b:200},
// 请求类型
type: 'GET',
// 响应体结果
dataType: 'json',
// 成功的回调
success: function(data){console.log(data);},
// 超时时间
timeout: 2000,
// 失败的回调
error: function(){console.log('出错啦~');},
// 头信息
headers: {
c: 300,
d: 400
}
})
7、axios
7.1、get
axios.defaults.baseURL='http://127.0.0.1:8000';
const btns=document.querySelectorAll('button');
btns[0].onclick=function(){
axios.get('/axios',{
//url参数
params:{
name:"amy",
vip:111
},
//请求头信息
/*headers:{
name:"mike",
age:20
}*/
}).then(value=>{
console.log(value);
});
}
7.2、post
btns[1].onclick=function(){
axios.post('/axios',
{
//请求体
username:'admin',
password:'admin'
},
//url参数
{
params:{
id:200,
vip:9
},
//请求头参数
headers:{
height:180,
weight:200
}
}
);
}
7.3、通用
btns[2].onclick=function(){
axios({
//请求方法
method:'POST',
//url
url:'axios',
params:{
vip:10,
level:30
},
//头信息
headers:{
a:100,
b:200
},
//请求体参数
data:{
username:'admin',
password:'admin'
}
}).then(response=>{
console.log(response);
});
}
8、fetch
btn.onclick=function(){
fetch('http://127.0.0.1:8000/fetch',{
method:'POST',
//请求头信息
headers:{
name:'amy',
level:10
},
//请求体
body:'username=admin&password=admin'
}).then(response=>{
return response.text();
}).then(response=>{
console.log(response);
});
}
9、跨域
9.1、同源策略
是浏览器的一种安全策略
同源： 协议、域名、端口号 必须完全相同。
违背同源策略就是跨域
456
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
