本文用于记录关与ajax这项技术的学习过程.
Ajax
Ajax (Asynchronous JavaScript and XML) 是一种Web应用技术,可以借助客户端脚本(javascript)与服务端应用进行异步通讯，获取服务端数据以后,可以进行局部刷新。进而提高数据的响应和渲染速度.
这就是Ajax的一个简单介绍,其特点与优势也都已经用加粗表示.
其中异步通讯,相对于同步通讯来说,
同步通讯就是当服务端正在处理一个请求时,若客户端有其他请求要提交也只能等待;
而基于Ajax的异步通讯就是在客户端与服务端中加入一层Ajax引擎(类似于池),可以帮助我们实现异步的作用,不用再是处理就等待,会有新的请求开启一个新的线程来进行处理.
优势:
底层异步/局部刷新/提高响应速度
劣势:
不能跨域进行访问
应用场景:
例如:商品系统(淘宝京东显示商品)/评价系统/地图系统...
入门实践
首先要了解所有的Ajax 请求都会基于DOM(HTML元素)事件，通过XHR（XMLHttpRequest）对象实现与服务端异步通讯局部更新
先将整体代码放在这里,后面按步骤介绍:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>The Ajax 01 Page</h1>
<div>
<!-- Ajax方式异步请求 -->
<fieldset> <!-- 分组设置 -->
<legend>异步请求</legend>
<button onclick="doAjaxGet()">GET Request</button>
<span id="ajaxResultId">loading data...</span>
</fieldset>
</div>
<script type="text/javascript">
function doAjaxGet(){
//1.创建XHR对象
var xhr=new XMLHttpRequest();
//2.设置状态监听(将服务端响应的结果更新在ajaxResultId位置)
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
}
}
//3.建立连接
xhr.open("GET","http://localhost/doGet",true);//true表示异步(底层会启动新的线程和服务端通信)
//4.发送请求
xhr.send();
console.log("==================");
}
</script>
</body>
</html>1.基于dom事件创建XHR对象(XMLHttpRequest对象)
//1.创建XHR对象
var xhr=new XMLHttpRequest();new XMLHttpRequest()是应用Ajax技术的入口,通过这个对象可以向服务端发送异步请求.
2.注册XHR对象状态监听，通过回调函数(callback)处理状态信息
//2.设置状态监听(将服务端响应的结果更新在ajaxResultId位置)
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
console.log(xhr.responseText);
document.getElementById("ajaxResultId").innerHTML=xhr.responseText;
}
}这是在注册状态监听,就是监听客户端和服务端通讯的状态,
if判断--
readyState==4表示客户端与服务端通讯结束(0:未初始化,尚未调用open()方法;1:启动,已经调用open()方法,但尚未调用send()方法;2:发送,已经调用send()方法,但尚未接收到响应;3:接收,已经接收到部分响应;4:完成,已经接收到全部响应数据,而且已经可以在客户端使用了)
status==200表示服务端处理过程正常(500表示服务端出错了)
responseText表示服务端响应的文本内容
3.创建与服务端的连接
//3.建立连接
xhr.open("GET","http://localhost/doGet",true);open()方法用于与服务端建立连接,并指定请求类型为GET,true表示异步请求(false表示同步请求,但是Ajax都是用异步)
4.发送异步请求实现与服务端的通讯
//4.发送请求
xhr.send();send()方法发送请求,加入请求类型为GET,send方法中不传数据
以上就是Ajax基本使用的四个步骤,之后就是可以对于这个步骤进行一些简化和更高阶的使用.
