Ajax（Asynchronous JavaScript and XML的缩写）是一种异步请求数据的web开发技术，对于改善用户的体验和页面性能很有帮助。
简单地说，在不需要重新刷新页面的情况下，Ajax 通过异步请求加载后台数据，并在网页上呈现出来。常见运用场景有表单验证是否登 入成功、百度搜索下拉框提示和快递单号查询等等。
想要对Ajax有一个全面的了解，这里可以去Js教程中对它进行一个全方面认识。
现在Ajax经过各种优化已经变得非常方便了，例如使用Jquery只需要一行便可以使用Ajax了。
那么原生的Ajax是什么样呢？
让我们来看一下吧。
<script type="text/javascript">
function ajax(url){
//创建XMLHttpRequest对象,新版本的浏览器可以直接创建XMLHttpRequest对象,IE5或IE6没有
//XMLHttpRequest对象，而是用的ActiveXObject对象
var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : ActiveXObject("microsoft.XMLHttp")
xhr.open("get",url,true);
xhr.send();//发送请求
xhr.onreadysattechange = () =>{
if(xhr.readystate == 4){//返回存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
if(xhr.status == 200){//返回状态码
var data = xhr.responseTEXT;
return data;
}
}
}
}
</script>
|
readystate：
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪
status ：
200: "OK"
404: 未找到页面
405：请求方式不正确
500：服务器内部错误
403：禁止请求
Ajax有两种请求方式：
get请求方式
<script type="text/javascript">
function ajax() {
//创建核心对象
xhr = null;
if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText)
}
}
//open设置请求方式和请求路径
xhr.open("get", "/Ajax/ajax?userId=10");//一个url还传递了数据，后面还可以写是否同步
//send 发送
xhr.send();
}
</script>
|
post请求方式
<script type="text/javascript">
function ajax() {
//创建核心对象
xhr = null;
if (window.XMLHttpRequest) {// 新版本的浏览器可以直接创建XMLHttpRequest对象.
xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {// IE5或IE6没有XMLHttpRequest对象
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
//编写回调函数
xhr.onreadystatechange = function() {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText)//警告框，显示返回的Text
}
}
//open设置请求方式和请求路径
xhr.open("post", "/Ajax/ajax2");//一个servlet，后面还可以写是否同步
//设置请求头
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded")
//send 发送
xhr.send("userId=10");
}
</script>
|
(责任编辑：yang) |
