Chrome插件 - JS跨域请求（ 结合回调函数 ）

版权声明：转载请注明出处 https://blog.csdn.net/qq_42292831/article/details/88858366

跨域指的是JavaScript通过XMLHttpRequest请求数据时，调用JavaScript的页面所在的域和被请求页面的域不 一致。

对于网站来说，浏览器出于安全考虑是不允许跨域，但是Chrome为了大幅度拓展浏览器第三方功能，提供了跨域操作，

前提需要在Manifest.json文件中声明需要跨域的页面：

"permissions": [ 
	"http://*/*", 
	"https://*/*"
]

---

---

function httpRequest(url, callback){    
	var xhr= new XMLHttpRequest();    
	xhr.open("GET", url, true);    
	xhr.onreadystatechange = function() { 
		if (xhr.readyState == 4 && xhr.status == 200) { 
			callback(xhr.responseText); 
		}    
	}    
	xhr.send(); 
}
var html; 
httpRequest('http://www.turingapi.com/', function(result){    
	//html = JSON.parse(result);   
	html = result;
	alert(typeof(html)+'\n'+html);
	}
)

---

xhr.open(...)包含三个常用参数：

• 向服务器发送请求的类型
• 待访问的URL
• 是否异步请求

---

AJAX异步请求：

当使用xhr.send()向服务器发送异步请求后，在收到服务器返回的所有数据之后，会执行回调函数；

在未收到服务器返回所有数据之前，浏览器的其他事务处理不会被截断；

( 相较于同步请求，则会在该阶段出现页面"冻结"或显示无响应的情况 )

---

xhr.readyStatus返回值为XMLHttpRequest的请求状态：

• 0：请求未初始化
• 1：已与服务器建立连接
• 2：请求已接收
• 3：请求处理中
• 4：请求已完成且相应就绪（最后有xhr.send()向服务器发送请求）

---

回调函数的介绍及使用：

回调函数即一个通过函数指针调用的函数；

在A函数中，将B函数的指针作为参数传入，在A函数中使用B(xxx)

=> 在该函数外使用A函数时，将函数C(yyy)放于A函数参数中函数指针的位置，即可在C函数中使用相应的返回值。

---

URL长度限制：2^11