揭秘AJAX技术-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_43260981/article/details/96373721

AJAX是什么?
AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。Ajax是作用于客户端的.

AJAX的作用?
使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信。通过这个对象，JavaScript 可在不重载页面的情况与 Web 服务器交换数据(异步提交)。
AJAX的特点?
1.AJAX 在浏览器与 Web 服务器之间使用异步数据传输（HTTP 请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。
2.AJAX 可使因特网应用程序更小、更快，更友好。
3.AJAX 是一种独立于 Web 服务器软件的浏览器技术。

AJAX的思想
在传统的 JavaScript 编程中，若想获得服务器上的文件或数据库中的信息，或者向服务器发送信息，就必须利用一个 HTML 表单向服务器 GET 或 POST 数据。而用户则需要单击“提交”按钮来发送/获取信息，等待服务器的响应，然后一张新的页面会加载结果。
由于每当用户提交输入后服务器都会返回一张新的页面，传统的 web 应用程序变得运行缓慢，且越来越不友好。
通过利用 AJAX----- JavaScript 的 XMLHttpRequest 对象，发送HTTP 请求，web 页可向服务器进行请求，并得到来自服务器的响应，而不加载页面。用户可以停留在同一个页面，他或她不会注意到脚本在后台请求过页面，或向服务器发送过数据。
传统web服务工作原理:

Ajax的web服务工作原理:在浏览器和服务器间,加入了ajax处理部分.

Ajax工作原理:
:通过脚本语言的监听和触发事件,开启ajax.在ajax中创建执行http请求的对象----XMLHttpRequest对象.用open方法创建一个http请求,send方法将请求发出.onreadychange设置回调函数,处理服务器传回的数据.
Ajax 交互流程
1、用户在 Web 页面的交互动作触发 DOM 事件
2、DOM事件处理者收到事件发生的消息处理
3、事件处理者创建 XMLHttpRequest 对象，设置目标URL、HTTP方法(Get、Post)等内容，注册服务器响应的回调函数
4、向服务器发生异步的HTTP请求
5、异步请求发出后，浏览器不必等待服务器响应，用户可以继续与页面交互
6、服务器收到请求后，指派对应的 Servlet 处理对应逻辑
7、将结果数据序列化成 XML 作为响应内容，返回给浏览器
8、调用在XMLHttpRequest对象上注册的回调函数
9、回调函数解析响应内容 XML文档，依据其中的数据使用JavaScript 操纵DOM对象更新页面内容

创建 XMLHttpRequest 对象–>编写回调函数---->创建请求----->发送请求和参数

XMLHttpRequest 对象
不同的浏览器创建 XMLHttpRequest 对象的方法是有差异的。
IE 浏览器使用 ActiveXObject
XMLHttpRequest 得到下列浏览器的支持：Internet Explorer 5.0+、Safari 1.2、Mozilla 1.0 / Firefox、Opera 8+ 以及 Netscape 7。

XMLHttp=new XMLHttpRequest() ;//针对 Firefox、Opera 以及 Safari 浏览器。
xmlHttp=new ActiveXObject(“Msxml2.XMLHTTP”);//Internet Explorer 6.0+
xmlHttp=new ActiveXObject(“Microsoft.XMLHTTP”); //Internet Explorer 5.5+

XMLHttpRequest对象.
Var xmlHttp;
Function createXMLHttpRequest()
{if(window.ActiveXObject)//返回一个对象或者null,if语句会把结果看做true或false
{xmlHttp= new ActiveXObject(“Microsoft.XMLHTTP”);
//new ActiveXObject表示要创建一个ActiveXObject对象,根据参数指定对象的类型,为XMLHttpRequest对象
}
Else if(window.XMLHttpRequest)
{ xmlHttp=new XMLHttpRequest();
}
}

Table 1. XMLHttpRequest 对象的方法
Method Description
abort() 停止当前请求
getAllResponseHeaders() 返回完整的HTTP响应头信息。
getResponseHeader(“headerLabel”) 返回指定名称的HTTP响应头信息。
open(“method”, “URL”[, asyncFlag[, “userName”[, “password”]]]) 设置一个到服务器URL的请求；通常method=post/get, asyncFlag为true表示异步，false表示同步。默认为异步。剩下的两个参数可选,表示可以附带的用户名和密码
send(content) 发送请求， content为请求体内容, 如果GET方式，设置为null.
setRequestHeader(“label”, “value”) 设置发送请求的request头信息。

Table 2. XMLHttpRequest 对象属性
属性描述
onreadystatechange 事件处理函数，当处理状态readyState发生变化的时候调用指定的处理函数。无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值-向该方法指示无论readyState值何时发生改变，该对象都将激活。
readyState XHR的处理状态
0 = unitialized (未初始化)对象已建立，但是尚未初始化（尚未调用open方法）
1 = loading (初始化)对象已建立，尚未调用send方法
2 = loaded (发送数据) send方法已调用，但是当前的状态及http头未知
3 = interactive (数据传送中) 已接收部分数据，因为响应及http头不全，这时通过responseBody和responseText获取部分数据会出现错误，
4 = complete (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据
responseText 从服务端返回数据的字符串,String格式表示。
这个responseText属性包含客户端接收到的HTTP响应的文本内容。当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。
responseXML 从服务端返回数据的DOM对象表示。
此responseXML属性用于当接收到完整的HTTP响应时(readyState为4)描述XML响应；此时，Content-Type头部指定MIME(媒体)类型为text/xml，application/xml或以+xml结尾。如果Content-Type头部并不包含这些媒体类型之一，那么responseXML的值为null。无论何时，只要readyState值不为4，那么该responseXML的值也为null。
status 从服务端返回的HTTP状态码， 202=“请求被接受但是没有成功” 400=“错误的请求” 404=“文件未找到” 500=内部服务器错误”
statusText HTTP状态的描述信息。这个statusText属性描述了HTTP状态代码文本；并且仅当readyState值为3或4才可用。当readyState为其它值时试图存取statusText属性将引发一个异常

Post和get的区别:
1.参数在get方法中,作为url的一部分显示在路径中，post方法没有。
2.Post传输的数据量大，可以达到2M，而Get方法由于受到URL长度的限制,只能传递大约1024字节.
3.Post顾名思义,就是为了将数据传送到服务器端,Get就是为了从服务器端取得数据.而Get之所以也能传送数据,只是用来设计告诉服务器,你到底需要什么样的数据.Post的信息作为http请求的内容，而Get是在Http头部传输的。
4.在ajax中的post提交中,参数作为http请求的实体.为了确保服务器知道实体中有参数变量.通常使用XmlHttpRequest对象的setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);

responseXML和responseText的区别:
responseXML对应服务器中(servlet)的response.setContentType(“text/xml;charset=UTF-8”);
responseText对应服务器中(servlet)的response.setContentType(“text/html;charset=UTF-8”);
无论服务器端返回的是XML还是普通的文本内容，html内容，都可以使用responseText属性来获得服务器端的返回值

举例:

function test()
{

//创建XMLHttprequest对象
var XMLHttp;
if (window.ActiveXObject){ 
           XMLHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE
      }else if(window.XMLHttpRequest){ 
           XMLHttp = new XMLHttpRequest(); //针对 Firefox、Opera 以及 Safari 浏览器
      }
//编写回调函数
XMLHttp.onreadystatechange=function()
  {
  if(XMLHttp.readyState==4)//表名请求已经被处理
    {   var val=XMLHttp.responseText;//拿到服务器的回复信息
     if(XMLHttp.status==200)
    	 {
    	 
    	if(-1==val)
    	 {  document.getElementById("selectForm").reset();
    		update1(id);
    		alert("修改失败!")}
    	else{
    		
    		update1(id);
    		  alert("修改成功!")
    	 }
    	 
    	 }else{
    		  document.getElementById("selectForm").reset();
    		update1(id);
    		 alert("修改失败!")
    	 }
    }
  }
//创建请求
XMLHttp.open("post","userServlet?action=update",true);
//post提交需要自己设定http头信息
XMLHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
//发送请求和参数

XMLHttp.send(“id=”+id+"&name="+name+"&sex="+sex);
}

Java-Ajax总结