一、什么是Ajax
Ajax (Asynchronous javascript and xml) 交互式网页应用开发技术,通过javascript的异步通信,从服务器获取XML文档(或者JSON文档)提取数据,再更新当前网页对应的部分,而不用刷新整个网页
二、基本概念
服务器端(后端):
服务器端语言:php node java python ruby Go
数据库:mysql mongodb sqllite
浏览器端(前端):
HTML CSS Javascript H5 IOS Android pc网页
前后端链接所用的协议:
HTTP协议
XMLHttpRequest对象
TCP
UDP
ps:环信 融云(即时聊天开发)
三、获取Ajax的步骤
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象
var xhr = new XMLHttpRequest();
(2) 创建一个新的HTTP请求,并指定该HTTP请求的方法(post/get) 、URL及验证信息
xhr.open('post','baseURL',true); //验证信息true可以省略
或者
xhr.open('get','baseURL',true);
设置头信息,让数据以不同的格式(content-type)传递给服务器
//告诉浏览器信息格式为form --- x-www-form-urlencoded
xhr.serRequestHeader("content-type","application/x-wwww-form-urlencoded")
//浏览器信息主体是序列化的JSON字符串
application/json
//XML格式个数据
text/xml
(3) 发送请求:具体要传什么数据告诉server
//有参数的传递(“ ”里面的为后端给的接口参数名)
xhr.send(" "username=" + UserName+ "&pwd=" + password ");
//无参传递
xhr.send();
(4) 设置状态监听函数
xhr.onreadystatechange = function () {
if(xhr.readyState==4 && xhr.status == 200)
{
var res = JSON.parse(xhr.responseText); //json解析完成后res为一个对象
var str = res.data;
if(str=="登录成功")
{
window.location.href = "DrpletService.html";
}
else
{
alert(str);
}
}
}
//readyState==4表示请求已经完成 xhr.status == 200表示数据已成功返回
我对 ajax 的理解是,它是一种异步通信的方法,通过直接由 js 脚本向服务器发起 http 通信,然 后根据服务器返回的数据, 更新网页的相应部分,而不用刷新整个页面的一种方法。 创建一个 ajax 有这样几个步骤:
首先是创建一个 XMLHttpRequest 对象。
然后在这个对象上使用 open 方法创建一个 http 请求,open 方法所需要的参数是请求的方法、请 求的地址、是否异步和用户 的认证信息。
在发起请求前,我们可以为这个对象添加一些信息和监听函数。比如说我们可以通过 setRequestHeader 方法来为请求添加头信 息。我们还可以为这个对象添加一个状态监听函数。
一个 XMLHttpRequest 对象一共有 5 个状态, 当它的状态变化时会触发on readystatechange 事件,我们可以通过设置监听函数,来处理请求成功后的结果。
当对象的 readyState 变为 4 的时候,代表服务器返回的数据接收完成,这个时候我们可以通过判断请求的状态,如果状态是 2xx 或者 304 的 话则代表返回正常。这个时 候我们就可以通过 response 中的数据来对页面进行更新了。
当对象的属性和监听函数设置完成后,后我们调用 sent 方法来向服务器发起请求,可以传入参数作 为发送的数据体。