传统请求的缺点:
传统的web交互是用户触发一个http请求服务器,服务器收到后再响应给用户并且返回一个页面。每次服务器在处理客户端请求时,用户都要等待,哪怕只是一个很小的交互,服务器都要返回一个完整的html页面,这样用户就浪费了很多时间和带宽获取整个页面。这种做法浪费了很多带宽,每次应用都要向服务器发起请求,这样应用的响应时间就依赖于服务器的响应时间,这导致了用户界面的响应比本地应用慢的多。
ajax:ajax的出现,刚好解决了传统方法的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
XMLHttpRequest 对象:XMLHttpRequest对象是ajax的基础,XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。目前所有浏览器都支持XMLHttpRequest。
五步使用法:
1.创建XMLHttpRequest对象。
2.使用open方法设置和服务器的交互信息。
3.设置发送的数据,开始和服务器端交互。
4.注册事件。
5.更新页面。
get请求:
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
if (ajax.readyState==4 &&ajax.status==200) {
//步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
}
}
post请求:
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的类型及url
//post请求一定要添加请求头才行不然会报错
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
// 这步为判断服务器是否正确响应
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(xhr.responseText);
}
};
为了使用方便,可以将请求封装起来,直接调用就好了:
function ajax_method(url,data,method,success) {
// 异步对象
var ajax = new XMLHttpRequest();
// get 跟post 需要分别写不同的代码
if (method=='get') {
// get请求
if (data) {
// 如果有值
url+='?';
url+=data;
}else{
}
// 设置 方法 以及 url
ajax.open(method,url);
// send即可
ajax.send();
}else{
// post请求
// post请求 url 是不需要改变
ajax.open(method,url);
// 需要设置请求报文
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 判断data send发送数据
if (data) {
// 如果有值 从send发送
ajax.send(data);
}else{
// 木有值 直接发送即可
ajax.send();
}
}
// 注册事件
ajax.onreadystatechange = function () {
// 在事件中 获取数据 并修改界面显示
if (ajax.readyState==4&&ajax.status==200) {
// console.log(ajax.responseText);
// 将 数据 让 外面可以使用
// return ajax.responseText;
// 当 onreadystatechange 调用时 说明 数据回来了
// ajax.responseText;
// 如果说 外面可以传入一个 function 作为参数 success
success(ajax.responseText);
}
}
}
XMLHttpRequest对象中readyState与status的几种常见状态
readyState有五种状态:
0 (未初始化): (XMLHttpRequest)对象已经创建,但还没有调用open()方法;
1 (载入):已经调用open() 方法,但尚未发送请求;
2 (载入完成): 请求已经发送完成;
3 (交互):可以接收到部分响应数据;
4 (完成):已经接收到了全部数据,并且连接已经关闭。
关于status,由于它的状态有几十种,我只列出平时常用的几种:
1xx——信息类,表示收到Web浏览器请求,正在进一步的处理中。如,100:客户必须继续发出请求;101:客户要求服务器根据请求转换HTTP协议版本
2xx——成功,表示用户请求被正确接收,理解和处理。例如,200:OK;201:提示知道新文件的URL
3xx——重定向,表示请求没有成功,客户必须采取进一步的动作。如,300:请求的资源可在多处得到;301:删除请求数据
4xx——客户端错误,表示客户端提交的请求有错误。如,404:NOT Found,意味着请求中所引用的文档不存在。
5xx——服务器错误,表示服务器不能完成对请求的处理。如,500,服务器产生内部错误