Ajax基础跨域

最新推荐文章于 2021-08-06 16:30:11 发布

FIND方式

最新推荐文章于 2021-08-06 16:30:11 发布

阅读量125

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_43091563/article/details/104627250

版权

JavaScript 专栏收录该内容

45 篇文章 0 订阅

订阅专栏

本文详细介绍了Ajax的工作原理，包括使用XMLHttpRequest对象进行异步请求的过程，以及如何通过$.ajax()等方法在jQuery中实现Ajax。同时，探讨了跨域问题的解决方案，如CORS和JSONP，并提供了具体的代码示例。

摘要由CSDN通过智能技术生成

Ajax简介

从API获取后台数据，应用于局部刷新技术，异步请求。
异步请求：请求和后续代码同时执行
同步请求：等待请求执行完成在执行后续代码

Js-Ajax对象 XMLhttprequest对象 5步

实例化对象http
var http=new XMLhttpRequest();
连接远程服务器
http.open(method,url,true,user,password,callback);
参数： method 请求的方式；get post url:请求的服务器路径；async 当前的请求是同步还是异步 true 异步 false 同步；user 用户名 password 密码
发送请求
http.send();
响应事件
onreadystatechange
渲染界面
判断最终状态http.readystate==4
状态码http.status 200 success 500 服务器报错 404 服务器端页面丢失
返回string类型数据var strdata=http.response || http.responseText
string类型数据转化成object类型数据var data=JSON.parse(strdata);

http.onreadystatechange=function(){
//5. 渲染界面
if (http.readyState == 4 && http.status == 200) { 
            //返回string数据
            var strdata=http.response || http.responseText;
            console.log(http.response);
            console.log(http.responseText);
            //string json转化成对象json JSON.parse（）
            //对象json转化成string json JSON.stringify()
            var data = JSON.parse(strdata);
            console.log(data);
        }
}

HTTP: Status 200 – 服务器成功返回网页
HTTP: Status 404 – 请求的网页不存在
HTTP: Status 503 – 服务不可用

跨域

协议（http/https）域名端口，有一个不同就会形成跨域

cros解决跨域

jsonp解决跨域(src跨域)

    function getdata(result) {console.log(result);}
</script>
<script src="http://localhost:8080/jsonp.php?index=1&cb=getdata"></script>

script使用src进行跨域在接口上传入要执行的回调函数

Jquery-Ajax

ajax 请求

$.ajax()–jQuery 底层 AJAX 实现

$.ajax({
	method:"post/get",
	data:{},
	url:"",
	success:function(result){},
	error:function(err){},
	dataType:"jsonp",//jsonp跨域
	jsonpCallback:"jsonp-callback",//jsonp回调函数getData
	async:true,//异步同步请求，
	timeout:2000,
	contentType: "application/x-www-form-urlencoded",//默认设置发送内容编码
	headers: {//headers  是附加到请求上的额外的键值属性
     city: "test"
     }})
/* 	 dataType
"xml": 返回 XML 文档，可用 jQuery 处理。
     "html": 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
     "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意：'''在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
     "json": 返回 JSON 数据 。
     "jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" ,jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
     "text": 返回纯文本字符串
     */

$.get, $.post --jQuery 高层AJAX 实现

$.get(url,[data],[fn],[datatype])//datatype="jsonp"在前面添加callback
$.getJSON(url,[data],[fn])//datatype 默认json
$.getScript(url,[callback])
$.post(url,[data],[fn],[datatype])//datatype="jsonp"在前面添加callback

jsonp跨域举例

function getData(res) {console.log(res);}
$.get("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=火车&cb=getData",function(res) {
        console.log(1);//不进入 不能删除
    },"jsonp");//进入getData函数

$.post("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=火车&cb=getData",function(res) {
       console.log(1);//不进入 不能删除
   },"jsonp");//进入getData函数

ajax 事件

ajaxSend(callback)		//AJAX 请求发送时执行函数
ajaxStart(callback)		//AJAX 请求开始时执行函数
ajaxComplete(callback)  //AJAX 请求完成时执行函数
ajaxStop(callback)		//AJAX 请求结束时执行函数
ajaxSuccess(callback)	//AJAX 请求成功时执行函数
ajaxError(callback)		//AJAX 请求发生错误时执行函数

    $(".btn").click(function () {
        $.ajax({
            method: "get",
            data: {id: 101051107},
            url: "https://api.help.bj.cn/apis/weather/",
            success: function (res) { console.log(res);}
        })
    }).ajaxStart(function () {
        console.log("ajaxStart");
    }).ajaxStop(function () {
        console.log("ajaxStop");
    }).ajaxSend(function () {
        console.log("ajaxSend");
    }).ajaxComplete(function () {
        console.log("ajaxComplete");
    });