JavaScript学习总结（七）Ajax和HTTP状态字
Wednesday, December 13, 2017
12:23 PM
JavaScript学习总结（七）Ajax和HTTP状态字
2016-09-16 分类：WEB开发、编程开发、首页精华0人评论 来源：trigkit4
分享到： 更多 4 .
Ajax及其工作原理
AJAX 是一种与服务器交换数据无需刷新网页的技术，最早由Google公司在谷歌地图里使用，并迅速风靡。
AJAX是不能跨域的，如需跨域，可以使用document.domain=’a.com’；或者使用服务器代理，代理XMLHttpRequest文件
AJAX是基于现有的Internet标准，并且联合使用它们：
XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)
创建 XMLHttpRequest 对象
所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。
创建Ajax对象：
//IE6以上
var oAjax = new XMLHttpRequest();
//IE6
var oAjax =new ActiveXObject(“Microsoft.XMLHTTP”)
连接服务器
oAjax.open(方法,url,是否异步)
我们都知道，Ajax即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。所以，Ajax天生就是工作在异步模式的（异步为true，同步false）
同步和异步
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
（简单点说：同步就是只能一件一件事的来做，而异步就是可以多件事同时进行）
发送请求send()
alert(oAjax.readystate);
}
只要readyState属性的值发生变化时，便会触发一次readyStatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常，我们只对readyState值为4的阶段感兴趣，因为这时所有数据都已经就绪，不过，必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子：
var xhr = createXHR();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
alert(xhr.statusText);
} else {
alert(“Request was unsuccessful: “ + xhr.status);
}
}
};
xhr.open(“get”, “example.txt”, true);
xhr.send(null);
XHR对象
XMLHttpRequest这个对象的属性：
它的属性有：
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码，比如常见的404（未找到）和200（已就绪）
status Text 伴随状态码的字符串信息
当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。readyState就是XHR请求的状态属性，它本身有5个属性值：
0（未初始化）还没有调用open()方法
1（载入）已调用send()方法，正在发送请求
2(载入完成)send()方法完成，已收到全部响应内容
3(解析)正在解析响应内容
4（完成）响应内容解析完成，可以再客户端使用了
HTTP状态码
1字头：消息。这一类型的状态码，代表请求已被接受，需要继续处理。
2字头：成功。这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。
3字头：重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。
4字头：客户端错误。这类状态码代表了客户端看起来可能发生错误，妨碍了服务器的处理。
5字头：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生
另附：http状态码详解 w3cschool HTTP 状态消息：http://www.w3school.com.cn/tags/html_ref_httpmessages.asp
status和statusText
statusText是响应返回的文本信息，仅当readyState值为3或4的时候才能使用。当readyState为其它值时视图存取statusText属性将引发异常。
XHR的方法
|
| | | —- | —- |
| 方法 | 描述 |
| abort() | 导致当前正在执行的请求被取消 |
| getAllResponseHeaders() | 返回包含所有响应头的名称和值的单个字符 |
| getResponseHeader(name) | 返回响应头中指定的名称和值 |
| open(method,url,async,username,pwd) | 设置HTTP方法（get或post）等 |
| send(content) | 发出带有指定主体内容的请求 |
| setRequestHeader(name,value) | 使用指定的名称和值设置请求头 |
jQuery中的Ajax
.load()方法是局部方法，因为他需要一个包含元素的jQuery对象作为前缀，而.post()是全局方法，无需指定某个元素，对于用途而言，.load()适合做静态文件的异步获取，而对于需要传递参数到服务器页面的，.post()更加合适。
GET和POST传入的data是一个键值对 对象，不同的是GET传入的data是通过地址栏传输的，而POST是通过表单提交的，
$(function () {
$(“input”).click(function () {
$.get(‘test.php?url=baidu.com’, function (response,status,xhr) {
(function () {
$(“input”).click(function () {
$.post(‘test.php’,’url=baidu.com’, function (response,status,xhr) {
$(‘#box’).html(response);
})
})
}); //post提交可以使用对象键值对
$(function () {
$(“input”).click(function () {
$.post(‘test.php’,{
url:’baidu.com’//post提交可以使用对象键值对
}, function (response,status,xhr) {
$(‘#box’).html(response);
})
})
});
$.get()方法有四个参数，前面三个参数和.load()一样，多了一个第四参数type，即服务器返回的内容格式，包括xml,json,script,html,text等，第一个参数为必选参数，后面三个为可选参数
.ajax()方法的封装，这个方法只有一个参数，传递一个
各个功能键值对的对象。
$.ajax()方法对象参数列表
|
| | | | —- | —- | —- |
| 参数 | 类型 | 说明 |
| url | string | 发送请求的地址 |
| type | string | 请求方法，默认GET |
| timeout | Number | 设置请求超时的时间 |
| data | Object或String | 发送到服务器的对象，键值对字符串或对象 |
| datatype | String | 返回的数据类型，比如html，XML，json等 |
| success | Function | 请求成功后调用的回调函数 |
| complete | Function | 请求完成后调用的回调函数 |
| error | Function | 请求失败后调用的回调函数 |
$(function () {
$(“input”).click(function () {
$.ajax({
type : “POST”,
url: ‘test.php’,
data:{
url: ‘baidu.com’
},
success : function(response,status,xhr){
$(‘#box’).html(response);
}
})
})
});
表单序列化
Ajax用的最多的地方莫过于表单操作，而传统的表单操作是通过submit提交将数据传输到服务器，如果使用Ajax异步处理
的话，我们需要将每个表单元素获取才能提交，这样工作效率就大大降低
2、为了更好的可访问性，内容发生改变后，通常改变URL的hash
3、hash的方式不能很好的处理浏览器的前进、后退等问题
4、进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变
5、但这种方式对搜索引擎很不友好
6、twitter和google约定了使用#!xxx（即hash第一个字符为!），搜索引擎进行支持。
JavaScript学习系列文章目录
- JavaScript学习总结（一）基础部分
- JavaScript学习总结（二）数组和对象部分
- JavaScript学习总结（三）BOM和DOM详解
- JavaScript学习总结（四）function函数部分
- JavaScript学习总结（五）原型和原型链详解
- JavaScript学习总结（六）数据类型和JSON格式
- JavaScript学习总结（七）Ajax和Http状态字
- JavaScript学习总结（八）正则表达式
- JavaScript学习总结（九）事件详解
分享到： 更多 4 .
继续浏览有关AjaxJavaScript的文章
已使用 Microsoft OneNote 2016 创建。
若有收获，就点个赞吧
0 人点赞
