前端ajax实现和跨域实现
2019-11-27 本文已影响0人
煮黑豆
下面是用chrome实现ajax请求，并对ajax中get和post请求进行封装，最后对跨域请求的前端处理
本文用的idea工具
首先新建一个html页面，和一个数据文件
html和js代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<!--https://kyfw.12306.cn/otn/leftTicket/query?leftTicketDTO.train_date=2019-11-27&leftTicketDTO.from_station=SHH&leftTicketDTO.to_station=BJP&purpose_codes=ADULT-->
<body>
<script>
var xml=new XMLHttpRequest();
xml.open("get","./data.txt");
xml.send();
xml.onreadystatechange=function (ev) {
if(xml.readyState==4 && xml.status==200){
console.log( xml.response) ;
}
}
</script>
</body>
</html>
data.txt文件
[{
"name":"chen",
"age":"12"
},{
"name":"zhou",
"age":"18"
},{
"name":"wang",
"age":"21"
}]
文件目录结构
image.png
启动浏览器：即可在控制台看到
image.png
说明实现成功。
在script把get改为post
image.png
同样返回结果。
那下面对get和post请求封装一个方法
function ajax(url,data,method,cb) {
var xml=new XMLHttpRequest();
if(method=="get"){
if(data){
url+="?";
url+=data;
}
xml.open(method,url);
xml.send();
}else {
xml.open(method,url);
if(data){
xml.send(data)
}else {
xml.send();
}
}
xml.onreadystatechange=function (ev) {
if(xml.readyState==4 && xml.status==200){
console.log( xml.response) ;
}
}
}
以上最终实现了ajax的封装，不过没有兼容IE浏览器，对于IE用ActiveXObject即可
在script标签中直接调用
ajax("./data.txt",null,"get",function (data) {
console.log("==========");
console.log(data);
})
但是对于下面跨域请求
// https://kyfw.12306.cn/otn/leftTicket/query?leftTicketDTO.train_date=2019-11-27&leftTicketDTO.from_station=SHH&leftTicketDTO.to_station=BJP&purpose_codes=ADULT
ajax("./https://kyfw.12306.cn/otn/leftTicket/query?leftTicketDTO.train_date=2019-11-27&leftTicketDTO.from_station=SHH&leftTicketDTO.to_station=BJP&purpose_codes=ADULT",null,"get",function (data) {
console.log("==========");
console.log(data);
})
会报
image.png
跨域请求错误。请求必须保证协议、域名和端口号一致才可以，否则会报跨域
那如何解决这个问题呢？
用src属性可以解决。都有谁有src属性呢？
img标签，script标签和iframe 标签
