使用JS执行异步网络请求之AJAX初认始

本文链接：https://blog.csdn.net/a111111221/article/details/119208027

学习AJAX之前需要理解回调函数 可参见博客

1、引入

首先我们知道在Web中，一次HTTP请求对应一个页面。比如当我们开始提交一个表单时，浏览器就会刷新页面在新的页面得到结果（成功或者404)。如果想停留在原始页面同时发出新的HTTP的请求，就必须使用JS发送这个新的请求接收到数据后再刷新当前页面，这就需要JS写AJAX了。上代码实操一下

'use strict'
funcation success(text){
	var textarea=document.getElementById('test-response');
	textarea.vaule=text;
}
funcation fail(text){
	var textarea=document.getElementById('test-response');
	textarea.vaule='Error code'+code;
}
var request=new XMLHttpRequest();//现代浏览器写AJAX主要依靠XMLHttoRequest
request.onredystatechange==funcation(){//状态发生变化时，函数被回调
	if(request.readyState===4){//请求成功
		if(request.status===200){
		    //成功，通过reponseText拿到响应文本
		    return success(request.responseText);
		}
		else{
		    return fail(request.status);//响应失败
		}
	}
	else{
	    //HTTP继续请求
	}
}
//发送请求
request.open('GET','/api/categories');
request.send();
alert('请求已发送，请等待')；

tips：(通过window对象是否具有，XMLHttpRequest属性来确定浏览器是否支持XMLHttpRequest)，其他浏览器可能支持AactiveXObject属性。

2、解释说明

1）XMLHttpRequest对象的open()方法有三个参数：
第一个是GET（请求不需要参数）或者POST、第二个是指定URL地址、第三个指定是否使用异步，默认为True。
2）最后的send()方法，才是真正的发送请求。
3）代码中URL使用的是相对路径，默认情况下，URL的域名必须和当前页面完全一致（域名一致，协议相同，端口相同，）。

3、拓展

想要通过JS请求其他网站需要采用其他方法：
1）通过Flash插件发送Http请求，但Flash使用很麻烦。
2）通过在同源域名下设一个代理服务器来转发请求，代理服务器再把结果返回。缺点是需要在服务器端做额外的开发。
3）通过JSONP，注意它只能使用GET请求，并且要求返回JS。这种方法实际上是利用了不同浏览器可以跨域引用JS资源。

<html>
<head>
<script src="http://example.com/.js"></script>
...
</head>
<body>
...
</body>
</html>

详见
4）如果浏览器支持HTML5，就可以使用CORS（cross-origin-resource sharing）实现跨域访问资源。
关于CORS是一个必须掌握的point,不论是否利用它实现跨域访问，在现代浏览器的背景下都应该掌握它。