前端开发学习之【AJAX】

AJAX

1.概述
- 1.AJAX
- 2.XML
- 3.跨域问题
- 4.HTTP协议
- 5.环境准备
2.使用
- 1.请求基本操作
- 2.设置参数
- 3.发送POST请求
- 4.响应JSON数据
- 5.请求超时问题
- 6.取消请求
- 7.请求重复发送问题
- 8.使用fetch函数发送ajax请求
3.jQuery中使用ajax
- 1.get请求
- 2.post请求
- 3.通用模式
4.axios使用ajax
5.跨域问题
- 1.同源策略
- 2.如何解决跨域

1.概述

1.AJAX

AJAX全称为Asynchronous Javascript And XML （异步的JS和XML）。通过AJAX可以在浏览器中发送异步请求，最大的优势是不用刷新就能获取数据。

优点：

可以无需刷新页面就与服务器端进行通信；
允许你根据用户事件来更新部分页面内容。

缺点：

没有浏览历史，不能回退；
存在跨域问题；
SEO不友好（搜索引擎优化，爬虫爬不到）。

2.XML

XML可扩展标记语言，用来传输和存储数据。XML和HTML类似，但HTML中是预定于标签，而XML都是自定义标签。现在已经被JSON取代了。

3.跨域问题

跨域，指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器施加的安全限制。

所谓同源是指，域名，协议，端口均相同，只要有一个不同，就是跨域。localhost和127.0.0.1虽然都指向本机，但也属于跨域。

跨域会阻止接口的请求，会阻止Dom的操作。

4.HTTP协议

HTTP（hypetext transport protovol）协议，超文本传输协议，规定了浏览器与万维网服务器之间互相通信的规则。

请求报文

行：请求方式、URL路径、HTTP协议版本
头：Host、Cookie、Content-type、User-Agent
空行
体

响应报文

行：协议版本、响应状态码、响应状态字符串
头：Content-Type、Content-length、Content-encoding
空行
体：html源码

5.环境准备

下载node.js 和express：操作链接

2.使用

1.请求基本操作

//获取元素
const btn=document.getElementByTagName('button')[0];
//绑定事件
btn.onclick=function(){//1.创建对象const xhr=new XMLHttpRequest();//2.初始化 设置请求方法和urlxhr.open('GET','http://127.0.0.1:8000/路径');//3.发送xhr.send();//4.事件绑定 处理服务器端返回结果//readystate 是xhr对象中的属性，表示状态0 1 2 3 4//0 未初始化 1 open调用完毕 2 send调用完毕 3 服务器返回部分结果 4 返回所有结果xhr.onreadystatechange=function(){if(xhr.readystate===4){if(xhr.status>=200&&xhr.status<300){result.innerHTML=xhr.response;}}}
}

2.设置参数

在url中之间设置。

3.发送POST请求

xhr.open('POST','http://127.0.0.1:8000/路径+参数');
//设置请求头
xhr.setRequestHeader('type','content');
//设置请求体
xhr.send('请求体');

4.响应JSON数据

服务器端发送：

const data={name:'hh'};
let str=JSON.stringify(data);
response.send(str);

客户端接收：

//手动转换
let data=JSON.parse(xhr.response);
console.log(data.name);
//自动转换
console.log(xhr.response.name);

5.请求超时问题

//1. 2s内未收到结果就取消
xhr.timeout=2000;
//2. 设置超时回调，超时后调用该函数
xhr.ontimeout=function(){}//网络异常回调
xhr.onerror=function(){}

6.取消请求

xhr.abort();

7.请求重复发送问题

//标识是否正在发送ajax请求
let isSending=false;//发送后将isSending 改为true//绑定事件
xhr.onreadystatechange=function(){if(xhr.readyState===4){isSending=false;}
}

8.使用fetch函数发送ajax请求

fetch('url',{method:'POST',//请求头headers:{name:'ahh'},//请求体body:''
}).then(response=>{return response.text();//response.json();
});

3.jQuery中使用ajax

1.get请求

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

url：请求的url地址
data：携带的参数
callback：载入成功时的回调函数
type：设置返回内容格式

2.post请求

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

url：请求的url地址
data：携带的参数
callback：载入成功时的回调函数
type：设置返回内容格式

3.通用模式

$('button').eq(0).click(function(){$.ajax({url:'',data:{a:100,b:200},type:'GET'  //'POST',dataType:'json',success:function(data){},timeout:2000,error:function(){}})
})

4.axios使用ajax

5.跨域问题

1.同源策略

浏览器的一种安全策略，同源：协议、域名、端口号必须完全相同。

违背同源策略就是跨域。

2.如何解决跨域

JSONP：只支持get请求。

有些标签具有跨域能力，img、link、iframe、script，JSONP就是使用script标签的跨域能力来发送请求的。
script发送请求应该返回js语句。

jQuery发送jsonp请求：

$('button').eq(0).click(function(){$.getJSON('url',function(data){})
})

CORS：跨域资源共享

不需要在客户端做任何特殊操作，完全在服务器中进行处理，支持get和post请求。

CORS通过设置一个响应头来告诉浏览器，该请求允许跨域。

response.setHeader("Access-Control-Allow-Origin","*");
response.setHeader("Access-Control-Allow-Header","*");
response.setHeader("Access-Control-Allow-Method","*");
//*：全部
// 也可以写一个具体的url地址。