史上最全的Ajax基础详解

同步请求和异步请求

先解释一下同步和异步的概念：

同步是指：发送方发出数据后，等接收方发回响应之后才发下一个数据包的通信方式。

异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通信方式。

同步请求:

客户端请求(等待)->服务端处理->响应->页面载入 （缺乏对象:XMLhttpRequest）
这时候若是有错误，只能再次发送请求，再次等待

异步请求：

好比当你填写邮箱地址的时候，页面当时就把邮箱地址发送到了服务器（也就是页面发送了一个请求），服务器作处理和响应，获得你的邮箱地址填写重复了，把响应结果发给页面，在这个过程当中你仍然能够填写其余内容，这时候服务器会提示你有重复的邮箱地址，在页面上的表现只是邮箱地址旁别加了一行字或者把整个文本框标红，并无从新刷你的页面，全部的填写错误会实时的显示出来，你也会实时的更正。这个过程当中，你会有整个页面的刷新，也不会有整个页面的提交和等待，最后提交，一切都会搞定的

总结：页面上的操做和服务器端的操做互相之间不会形成阻塞

2、http是计算机经过网络进行通讯的规则

1 - 做用:客户端向服务端发送请求信息和服务

*客户端:本身的计算机的浏览器(web浏览器)

*服务端:服务器,一台高性能的计算机,做为存储,处理网络上的数据,信息(web服务器)
服务器指一个管理资源并为用户提供服务的计算机软件，一般分为文件服务器、数据库服务器和应用程序服务器。运行以上软件的计算机或计算机系统也被称为服务器。

2 - 特色：是一种无状态的协议(不创建持久的链接,服务端不保留链接的信息)

3 . 一个完整的HTTP请求过程的七个步骤:

创建TCP链接
web浏览器向web服务器发送请求命令
web浏览器发送请求头信息
web服务器应答
web服务器发送应答头信息
web服务器向浏览器发送数据
web服务器关闭TCP链接

4 - HTTP请求的四部分组成:

1.HTTP请求的方法或动做,好比GET仍是POST 2.正在请求的URL,总得知道请求的地址是什么 3.请求头,包含一些客户端环境信息,身份验证信息等 4.请求体,也就是请求正文,请求正文中能够包含客户提交的查询字符串信息,表单信息等等;

5 - HTTP请求方法

*GET:通常用于信息获取,用get请求-->查询或获取的操做 使用URL传递参数 对所发送信息的数量有限制,通常在2000个字 *POST: 通常用于修改服务器上的数据.好比:新建,修改,删除,发送表单数据 对所发送信息的数量无限制

6 - HTTP响应通常由三部分组成:

1.一个数字和文字组成的状态码,用来显示请求是成功仍是失败 2.响应头:响应头也和请求头同样包含许多有用的信息,例如 服务器类型,日期时间,内容类型和长度等 3.响应体,也就是响应正文

7 - HTTP状态码

100:信息类,表示web浏览器请求,正在进一步的处理中 200:成功,表示用户请求被正确接收正在进一步的处理中 200 OK 300:表示请求没有成功,客户端必须采起进一步的动做 400:客户端错误,表示客户端提交的请求有错误 例如:404 NOT Found,意味着 请求中所引用的文档不存在 500:服务器错误 表示服务器不能完成对请求的处理,如500

---

Ajax基础

---

1、什么是Ajax

AJAX即“Asynchronous Javascript And XML”（ 异步 JavaScript和XML），
AJAX不是一种新的编程语言，而是一种用于建立更好更快以及交互性更强的 Web 应用程序的技术。
它是一套综合了多项技术的浏览器端网页开发技术。
这些技术包括Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest.

2、Ajax原理

运用HTML和css来实现页面,表达信息

经过浏览器的XmlHttpRequest(Ajax引擎)对象

来向服务器(发送异步请求)并(接收服务器)的响应数据，

而后用javascript来操做DOM，实现动态局部刷新。

3、Ajax实现过程

😆

一般是

第一步:Javascript监听浏览器网页事件(点击,提交,更改等) 第二步:由javascript建立Ajax引擎对象 第三步:经过Ajax引擎对象发出请求 第四步:Ajax引擎等待而且接受服务器的响应内容 第五步:javascript再从 *Ajax引擎对象* 中获取响应内容, 而且经过dom改变网页界面显示效果

1.建立Ajax引擎对象

就是XMLHtttpRequest对象,全部现代浏览器均支持XMLHttpRequest对象

(IE5 和 IE6 使用 ActiveXObject)它同时也是一个Javascript对象.
Ajax引擎(XMLHttpRequest)

兼容处理

var xhr = null; if (window.XMLHttpRequest) { //全部现代浏览器(IE7+.Firefox.Chrome.Safari以及opera) xhr = new XMLHttpRequest; }else{ //老版本的Internet Explorer使用ActiveX对象 xhr = new ActiveXObject("Microsoft.XMLHttp"); }

2.配置请求对象的信息

xhr.open('GET/POST','url地址',['是否异步']);

注意：若是使用post请求,就必定要设置请求头

xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=gb2312");

3.发送请求

xhr.send([post请求参数字符串]);
发送请求分为两种状况:
1.监控用户的事件(onclick,onchange等),经过ajax发送请求
2.监控浏览器的事件(onload),经过ajax发送请求.

4.监听Ajax引擎对象的改变(是否正确作出了响应)

xmlHttpRequest.onreadystatechange = function(){ if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) { //xmlHttpRequest.responseText //xmlHttpRequest.responseText } }

4.1 - 详解onreadystatechange

onreadystatechange属性是一个方法,
监控到响应内容的返回,
根据响应内容使用javascript改变当前页面的部分html代码,从而达到不刷新改变局部html代码.
当Ajax引擎的状态发生改变时都会执行onreadystatechange属性对应的方法

>>其余方法：
    abort:取消当前请求 getAllResponseHeaders:获取响应的全部http头 getResponseHeader:从响应信息中获取指定的http头 open(方式get/post，url地址，同步异步): 建立一个新的http请求，打开请求，并指定此请求的方法、URL以及验证信息(用户名/密码) send():发送请求到http服务器并接收回应 setRequestHeader:单独指定请求的某个http头，header()设置http头协议信息 >>其余属性： onreadystatechange:指定当readyState属性改变时的事件处理句柄。 readyState:返回当前请求的状态，ajax行进过程当中不一样状态 responseBody:将回应信息正文以unsigned byte数组形式返回. responseStream:以Ado Stream对象的形式返回响应信息。 responseText:将响应信息做为字符串返回.只读 responseXML:将响应信息格式化为Xml Document对象并返回，只读 status:返回当前请求的http状态码. 200 ok 304 缓存； 404 not found; 403 没有权限 501 服务器级别错误 statusText:返回当前请求的响应行状态文本， ok not found forbidden

4.2 - 详解Ajax引擎的状态属性 readyState(0 1 2 3 4)

*0.请求未初始化 *1.服务器链接已创建 *2.请求已接收 *3.请求处理中 *4.请求已完成,而且响应已就绪

当Ajax引擎的状态属性为readyState为4时,说明服务器的响应已经发送给Ajax请求了.

可是响应的状态吗为200时:说明响应的内容是正确的,这时才会根据相应内容对当前页面的html处理

总结：

基本示例：
var xhr = new XMLHttpRequest; xhr.open('GET/POST','url地址',['是否异步']); xhr.send([post请求参数字符串]); xhr.onreadystatechange = function(){ if (xmlHttpRequest.readyState== 4 && xmlHttpRequest==200) { //作一些事情 //xhr.responseText } }

4、为何使用Ajax？

优势:

使用Ajax的最大优势，就是能在不更新整个页面的前提下维护数据。
这使得Web应用程序更为迅捷地响应用户动做，并避免了在网络上发送那些没有改变的html代码信息。

1.减轻服务器负担，按须要得到数据。 2.无刷新更新页面，减小用户的实际和心理的等待时间。 3.更好的用户体验。 4.减轻宽带的负担。 5.主流浏览器支持

缺点:

1.AJAX的程序必须测试针对各个浏览器的兼容性。 2.AJAX更新页面内容的时候并无刷新整个页面，所以，网页的后退功能是失效的；需提醒用户 3.对搜索引擎支持很差。