WEB前端开发之ajax基础篇+跨域访问

最新推荐文章于 2024-05-22 10:00:00 发布

原创最新推荐文章于 2024-05-22 10:00:00 发布 · 326 阅读

0 ·

CC 4.0 BY-SA版权

----------前端开发专栏收录该内容

26 篇文章

订阅专栏

本文详细介绍了Ajax交互的四个核心步骤及如何处理服务器响应。此外，深入探讨了跨域问题，包括其产生的原因、XMLHttpRequest跨域限制及解决方法，如使用script标签和JSONP实现跨域请求。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>ajax交互的四个步骤</title>
	<div class="message"></div>
</head>
<body>
	<input type="button" value="ajax 交互的四个步骤">
	<script>
		document.querySelector("input").onclick=function(){//querySelector只能获取一个元素
			//1.必须创建XMLHttpRequest对象
			var xhr = new XMLHttpRequest();
			//2.我要跟服务器交互，我必须代开这样一个连接
			xhr.open("post","01example.php");
			//3.我要给服务器发送数据，发送参数数据到服务器

			//还必须设置一个请求头道服务器
			//这个属于http协议的规定
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

			xhr.send("username=zhangsan");
			//4.我要接受服务器的数据，服务器在返回数据给客户端的时候回给一些状态，监听服务器状态的改变
			xhr.onreadystatechange=function () {
				//服务器在返回数据的过程当中，会给我0,1,2,3,4
				//其中4这个状态代表响应完成
				//怎么去获取这个状态，所有的操作都是通过这个对象完成
				alert(xhr.readyState);//会出现2，3，4所以不能在这里处理业务逻辑必须选定状态码
				if(xhr.readyState==4){//代表响应完成
					//响应完成并不代表响应是成功的
					//判断服务器端是响应成功，如果服务端返回了一个200的状态码，代表响应成功
				    //alert(xhr.status)会出现404
					if(xhr.status==200){
					    var data = xhr.responseText;
					    //alert(data);
						document.querySelector(".message").innerHTML=data;
					}
				}
            }
		}
	</script>

</body>
</html>

0 －（未初始化）还没有调用send()方法
1 －（载入）已调用send()方法，正在发送请求
2 －（载入完成）send()方法执行完成，已经接收到全部响应内容
3 －（交互）正在解析响应内容

4 －（完成）响应内容解析完成，可以在客户端调用了

所以这里

alert(xhr.readyState);会出现2，3，4三个值表明客户端接收数据的状态从载入完成-交互-完成的改变

跨域

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	我在这个页面去访问别的站点的数据，这个时候就会产生跨域.
	主站点是天猫，我现在想去请求极速数据，这个网站是一个数据接口网站.

	这时候就会出现跨域，就是跨域名访问.
	<script>
		var xhr = new XMLHttpRequest();
		xhr.open("get", "XXX");
		xhr.send(null);
		xhr.onreadystatechange=function () {
			if(xhr.readyState==4 && xhr.readyState==200){
			    var data = xhr.responseText;
			    alert(data);
			}
        }
	</script>
</body>
</html>

这里会报错英文XMLHttpRequest是不能跨域的除非在服务器端来设置 Access-Control-Allow-Origin 头来进行授权，具体的代码是：

Response.AddHeader("Access-Control-Allow-Origin", "http://www.XXX.com:8080“);

这行代码表明只有来自 http://www.XXX.com:8080 下的脚本才可以进行访问该服务器资源

正确的跨域是

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>

<input type="button" value="通过script标签去发送请求">
<script >

	//定义成一个全局函数
	function getInfo(obj) {
		console.log(obj);
	}
	document.querySelector("input").onclick=function () {
		//点击这个按钮，我给jd发送请求
		//http://www.jd.com/jd.php
		//假设我使用XMLHttpRequest 很明显就跨域了
		var script = document.createElement("script");

		//这个请求暂时是没有发送出去
		//现在还在内存中要把它挂在到页面上
		script.src="http://www.jd.com/jd.php?callback=getInfo";//默认get方式提交

		//因为现在服务端给我返回的数据
		//客户端以js的方式去解释这个数据
		//不符合js的语法，所以就报错了u.body.appendChile();
		//getInfo
		docment.body.appendChild(script);

		//我现在的目的是想在页面里面得到这个服务端返回的数据
	    //1：客户端给服务端传递一个回调函数，它还需要定义一个函数
		//2：服务端返回的是一个回调函数，并且将服务端的数据包在这个函数的调用里面
    }
</script>
	<!--我使用$.ajax({
		url:"",如果说我的这个地址跨域了，就发送不了请求
		type:"",
		data:"",
		success:function(){

		}
		因为浏览器有限制，如果我们使XMLHttpRequest对象发送请求，就有跨域限制
		如果添加一个dataType等于jsonp，jQ的ajax方法底层就不使用XMLHttpRequest，而是创建一个script标签，然后
		通过script标签去发送请求.

		如果我使用script标签发送请求，怎么去接收服务器端返回的这个数据.
		这个问题比较重要.

			如果我使用script标签去发送请求，服务器返回了数据，返回的数据客户端会直接以
			javascript的方式去解析服务器端返回的数据
			script浏览器坑定调用js的解析引擎去解析数据

			怎么样保证这个数据解析式正确的
			为什么只能解决get方式的跨域，底层使用script标签发送请求
			src href 这些发送的请求都是get请求
			jsonp，客户端给服务端传递一个回调函数，服务端
	})-->

</body>
</html>

jQ下的跨域访问

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>采用jQ来解决跨域</title>
	<script src="jQ/jquery-3.2.0.min.js"></script>
</head>
<body>
	<input type="text" id="telephone" placeholder="手机号归属地查询">
    <input type="button" value="查询">
	<div id="message"></div>
    <script >
        $(function () {
			$("input[type=button]").on("click",function () {

			    var telephone = document.getElementById("telephone").value;

				//这个是jQuery方法封装XMLHttpRequest对象提供的一个方法
				//jQ这个方法底层还是使用XMLHttpRequest 发送请求，还是有跨域限制
				$.ajax({
				    type:"get",
					url:"http://api.jisuapi.com/shou/query",
					data:"appkey=yourappkey&shouji="+telephone,
					datatype:"jsonp",//json with padding
					success: function (msg) {
						console.log(msg);
						var address = msg.result.province;
						var company = msg.result.company;

						document.getElementById("message").innerHTML="所属省份："+address+"所属公司类型："+company;
                    }
				})
			});
        })
    </script>
</body>
</html>

这里这是讲了get方法的跨域访问不能传输大量数据

后续会写一篇post方法跨域访问（通过CORS）