Ajax概念介绍------02

目录

一: Ajax-同步和异步

二: Ajax-XMLHttpRequest对象创建

三: Ajax-HTTP请求

四: Ajax-XMLHttpRequest发送HTTP请求

五: XMLHttpRequest取得响应

六: 实现Ajax基本流程:

---

一: Ajax-同步和异步

1.同步交互:在Ajax出现前,网络世界是一个同步交互的世界;

eg:当客户端发起一个请求,然后服务端处理这个请求,然后服务器再去响应;这个时候客户端一直在等待服务器端的请求和响应,当服务器处理这个响应完成之后,客户端会重新载入这个页面,如果这个时候有错误,只有再次客户端发起请求,再次等待,这样大量用户就可能很悲剧,一直在循环等待!

2.异步交互:在Ajax出现后,这个世界变成了异步交互的世界;

eg:填写一个复杂的表单,比如填写到邮箱时,利用ajax技术发送到后台,后台判断是否重复,如果重读,返回数据到页面出现提示,但服务端在判断邮箱是否重复的时候,客户端依然可以填写这个复杂表单的其他数据,不影响;这样提交这个表单的时候,就可以直接成功了,提高了用户体验度.

3.在XMLHttpRequest这个对象出现后,才出现了异步,发现可以利用这个对象,实现后台和服务器交换数据,而且这个交换数据不用重新加载整个页面,然后才出现了异步请求,局部刷新的Ajax技术.

4.怎么实现Ajax技术呢,要有三个方面的内容:

   1).运用Html和Css来实现页面,表达信息;

   2).运用XMLHttpRequest这个对象来和web服务器进行数据的异步交换;

   3).当异步数据拿回来之后,我们要运用JavaScript操作DOM,实现动态局部刷新.

二: Ajax-XMLHttpRequest对象创建

1.XMLHttpRequest对象如何来使用呢?

   我们在使用XMLHttpRequest它之前,要先实例化XMLHttpRequest这个对象,如下:

 var request = new XMLHttpRequest()

2. 大多数浏览器都兼容XMLHttpRequest这个对象,但ie5或者ie6甚至更早的版本,还没有出现这个对象,那如何兼容呢?

     我们只要判断一下版本就可以了:

	var request;
	if (window.XMLHttpRequest) {
		request = new XMLHttpRequest();//IE7+,Firefox,Opera,Safari...
	} else {
		request = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5
	}

3.当我们创建了XMLHttpRequest对象,我们就可以来请求了

三: Ajax-HTTP请求

1.什么是HTTP;

   1).http是计算机通过网络进行通信的规则,专家们设计出来出来http,http主要是使我们浏览器能够从web服务器去请求信息和服务;

   2).http是一种无状态的协议,什么是无状态的协议呢,无状态是指不建立持久的连接,也就是web服务器端不保留链接的一些相关信息,一个客户端向服务端发出请求,然后web服务器返回响应,接着链接就被关闭了,这个处理过程是没有记忆的,如果后续的处理需要之前传递的一些信息,比如之前的身份信息等等,那就需要重新的传递,这就是我们经常说的http是一种无状态的协议;

2.一个完整的HTTP请求过程,通常有下面7个步骤:

   1).建立TCP链接;一般http走的都是TCP的链接;

   2).Web浏览器向Web服务器发送请求命令;

   3).Web浏览器发送请求的头信息;

   4).Web服务器作出应答;

   5).Web服务器发送应答头信息;

   6).Web服务器向浏览器发送数据;

   7).Web服务器关闭TCP连接;

这个过程就是一个完整的HTTP请求过程!

3.HTTP请求,一个HTTP请求一般由四部分组成:

   1).HTTP请求的方法和动作,比如这个请求是GET请求还是POST请求;

   2).正在请求的URL,我们发出一个请求,总得知道请求的地址是什么吧;

   3).请求头,包含一些客户端环境信息,身份验证信息等;

   4).请求体,也就是请求正文,请求正文中可以包含客户提交的查询字符串信息,表单信息等等;

注:一般请求头和请求体之间有一个空行,空行表示请求头已经结束了.

  

4.GET请求和POST请求:

   1)GET请求:一般用于信息获取,GET请求是HTTP默认的一种请求方法;get请求一般来说是安全的,因为一般用它是获取信息,而不是修改信息,get请求一般用户查询,查询不会影响数据本身;我们一般不会用get请求来做新建或者修改动作,get请求发送的信息对任何人都是可见的,为什么可见呢,因为所有的变量和值都显示在URL中,也就是说GET请求是使用URL来传递参数的,正是因为使用URL来传递参数,GET请求对所发送信息的数量也有限制,一般在2000个字符;

   2).POST请求:post请求要安全一些,它可以理解为向服务器发送一些信息,一般用于修改服务器上的资源,我们通过post的方法,从表单发送一些数据,这个数据并不在URL中显示,对其他人是不可见的,所有的名称和值都会嵌入到http请求的请求体中,当然如果用工具拦截下来就另说了;而且post请求和get请求不一样,post请求对发送信息的数量也是没有限制的;

   3).一般我们会GET请求用户查询操作,用POST请求在表单中新建,修改以及删除操作;

   4).GET请求是冥等的,是指GET请求查询一个用户数据,执行一次和执行一万次,其效果都是一样的,都不会改变数据,所以说get请求是安全的;

5.服务器返回的叫响应,一个HTTP响应一般由三部分组成:

   1).一个数字和文字组成的状态码,用来显示请求是成功还是失败;因为客户端本身并不知道,需要服务器告诉它;

   2).响应头,响应头也和请求头一样包含许多有用的信息,例如服务器类型,日期时间,内容类型和长度等;

   3).响应体,也就是响应正文,服务器传过来的字符串,html代码等等;

6.HTTP请求状态码由3位数字构成,其中首位数字定义了状态码的类型:

   1). 1XX:信息类,表示收到Web浏览器请求,正在进一步的处理;

   2). 2XX:成功,表示用户请求被正确接收,理解和处理,例如:200 OK;

   3). 3XX:重定向,表示请求没有成功,客户必须采取进一步的动作;

   4). 4XX:客户端错误,表示客户端提交的请求有错误,例如:404 NOT Found,意味着请求中所引用的文档不存在;

   5). 5XX:服务器错误,表示服务器不能完成对请求的处理,如: 500

了解了http请求的状态码,有助于提高web应用程序调试的效率和准确性.

四: Ajax-XMLHttpRequest发送HTTP请求

1.XMLHttpRequest对象有2个方法,我们可以通过这两个方法把请求发送到服务器;open(method,url,async)方法和seng(string);

2. open方法:规定了请求的类型,uil,是否异步处理;通过调用它,我们就可以调用http请求了;

open(method,url,async)

   参数说明:

   1).method:规定了发送http请求的方式,是get方式还是post方式;不区分大小写,通常用大写;

   2).url:规定了请求地址,可以是相对地址,即相对于文档的地址,也可以是绝对地址;

   3).async:规定了这个请求是同步的还是异步的,通常我们用ajax,采用的都是异步请求;异步参数为true,同步参数为false;第三个参数的默认值就是true(异步),一般我们就不填写;

3.send(string):我们调用http请求后,要把这个请求发送到服务器;我们就用send(string)方法

send(string) //发送请求

  注:参数string:我们用get请求时,是没有请求主体的,所有的参数都会拼接到url中,所以get请求时,string这个参数可以不填写;但使用post请求时,seng方法就一定要填写参数!

4.例子:默认都已经创建了XMLHttpRequest对象;

request.open("GET","get.php",true);
request.send(); //发送请求


request.open("POST","post.php",true);
request.send(); //发送请求

request.open("POST","create.php",true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//这个请求时设置http的头信息,告诉web服务器我们发送一个表单,这个方法一定要写在open和send中间,否转会抛出异常
request.send("name=王二狗&sex=男"); //发送请求并填写参数

五: XMLHttpRequest取得响应

1.知道了怎么用http发用请求,请求发送到服务器之后,服务器要给出响应,但我们怎么获取服务器的响应呢?用下面方法:

2.获取服务器响应的方法或者属性:

   1). responseText: 获得字符串形式的响应数据;

   2). responseXML: 获得XML形式的响应数据;

   3). status和statusText: 以数字和文本形式返回HTTP状态码;

   4). getAllResponseHeader(): 获取所有的响应报头;

   5). getResponseHeader(): 查出响应中的某个字段的值;此时里面要填写参数;

3. readyState属性: 响应返回成功时得到通知,我们要监听这个属性值的变化,判断响应是否成功;

   1). 0:请求未初始化,open()还没有调用;

   2). 1:服务器连接已建立,open()已经调用了;

   3). 2:请求已接收,也就是接收到头信息了;

   4). 3:当readyState的值变成3的时候,表示服务器请求处理中,也就是接收到响应主体了;

   5). 4:请求已完成,且响应已就绪,也就是响应完成了;

4.我们要知道一个服务器究竟响应有没有成功或者是否完成,我们就要监听 readyState这个属性的变化,用onreadystatechange这个事件来监听,这个事件会在每一次readyState属性变化的时候去触发;像上面所说,会触发5次:

var request = new XMLHttpRequest(); //创建一个XMLHttpRequest对象
request.open("GET","get.php",true); //规定了请求方式,url,异步请求
request.send(); //发送请求
//onreadystatechange是一个触发事件,每一次readyState属性的变化都会触发这个事件
request.onreadystatechange = function(){
   //readyState等于4表示响应完成,当request.status等于200表示请求成功
  if(request.readyState===4 && request.status ===200){
    //做一些事情,request.responseText    
 }
}

六: 实现Ajax基本流程:

• 实例化一个XMLHttpRequest对象;
• open()方法,规定请求方式,url,以及是否异步;
• send()方法,发送请求;
• onreadystatechange触发事件,监听readyState值得变化;
• 判断是否响应完成和请求成功readyState等于4以及status等于200;
• 最后我们去拿到响应数据,异步调整一些页面变化;