5、第一个例子_头一个例子-CSDN博客

本文链接：https://blog.csdn.net/niexinblog/article/details/2514095

先看一个简单的例子，服务器上有一个JSP文件，客户端请求这个文件并显示页面，页面上只有一个按钮，用来向服务器发出异步请求。服务器将发回一个简单的文本信息作为响应。在处理这个响应时，会在一个警告窗口中显示该内容。

index.jsp：

<%@page contentType="text/html;charset=gb2312"%>

<HTML>

<HEAD>

<TITLE>第一个Ajax示例</TITLE>

var xmlHttp;//定义一个全局变量作为XMLHttpRequest对象的引用

//创建XMLHttpRequest对象

function createXMLHttpRequest() {

if (window.ActiveXObject) {

xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else if (window.XMLHttpRequest) {

xmlHttp = new XMLHttpRequest();

}

//发出请求

function startRequest() {

createXMLHttpRequest();//创建对象

xmlHttp.onreadystatechange = handleStateChange;//监听服务器的响应

xmlHttp.open("GET", "test.jsp", true);//发送请求

xmlHttp.send(null);

}

//响应函数

function handleStateChange() {

if(xmlHttp.readyState == 4) {

if(xmlHttp.status == 200) {

alert(xmlHttp.responseText);

}

</script>

</HEAD>

<BODY>

请点击按钮：<input type="button" value="点击" οnclick="startRequest();"/>

</FORM>

</BODY>

</HTML>

test.jsp：

<%@page contentType="text/html;charset=gb2312"%>

您好！

点击JSP页面上的按钮会生成一个警告框，其中显示test.jsp文件的内容。

使用XMLHttpRequest对象发送请求的基本步骤如下：

⑴. 为得到XMLHttpRequest对象实例的一个引用，可以创建一个新的实例，也可以访问包含有XMLHttpRequest实例的一个变量。

⑵. 告诉XMLHttpRequest对象，哪个函数会处理XMLHttpRequest对象状态的改变，为此要把对象的onreadystatechange属性设置为指向JavaScript函数的指针。

⑶. 指定请求的属性。XMLHttpRequest对象的open()方法会指定将发出的请求。open()方法取3个参数：一个是指示所用方法（通常是GET或POST）的串；一个是表示目标资源URL的串；一个是Boolean值，指示请求是否是异步的。

⑷. 将请求发送给服务器。XMLHttpRequest对象的send()方法把请求发送到指定的目标资源。send()方法接受一个参数，通常是一个串或一个DOM对象。这个参数作为请求体的一部分发送到目标URL。当向send()方法提供参数时，要确保open()中指定的方法是POST。如果没有数据作为请求体的一部分被发送，则使用null。

分析上面的代码，我们看到，当点击按钮时将执行startRequest()方法，首先是createXMLHttpRequest()，创建一个XMLHttpRequest对象，名为xmlHttp。接下来指定当服务器返回信息时客户端的处理方式，将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性。然后使用open()方法建立调用，并设置URL以及所希望的HTTP方法，这个方法会建立对服务器的调用。它有两个必要的参数，还有3个可选参数。要提供调用的特定方法，还要提供所调用资源的URL，这个URL可以是任何的URL，包括需要服务器解释执行的页面，不仅仅是静态页面。目标URL处理请求XMLHttpRequest请求则跟处理普通的HTTP请求一样，比如JSP可以用request.getParameter(“”)或者request.getAttribute(“”)来取得URL参数值。另外还可以传递一个Boolean值，指示这个调用是异步的还是同步的。默认值为true，表示请求本质上是异步的。如果这个参数为false，处理就会等待，直到从服务器返回响应为止。由于异步调用是使用Ajax的主要优势之一，所以倘若将这个参数设置为false，从某种程度上讲与使用XMLHttpRequest对象的初衷不太相符。不过，在某些情况下这个参数设置为false也是有用的，比如在持久存储页面之前可以先验证用户的输入。最后两个参数允许你指定一个特定的用户名和密码。请求实际上通过一个send()方法调用触发。这个方法具体向服务器发出请求。如果请求声明为异步的，这个方法就会立即返回，否则它会等待直到接收到响应为止。

现在来看看客户端接收响应后是如何处理的。我们把处理函数handleStateChange赋给XMLHttpRequest对象的onreadystatechange属性。当XMLHttpRequest对象的内部状态发生变化时，就会调用这个处理函数。当进行了异步调用，请求就会发出，脚本立即继续处理，即在脚本继续工作之前，不必等待请求结束。一旦发出了请求，对象的readyState属性会经过几个变化。尽管针对任何状态都可以做一些处理，不过你最感兴趣的状态可能是服务器响应结束时的状态。通过设置这个函数，就可以有效地告诉XMLHttpRequest对象：“只要响应到来，就调用这个函数来处理响应。”在这里，首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。XMLHttpRequest对成功返回的信息有两种处理方式：

① responseText：将传回的信息当字符串使用。

② responseXML：将传回的信息当XML文档使用，可以用DOM处理。

前面的例子中，我们使用了前者。由这个例子可以看到，这与正常的请求响应模式有所不同，但对 Web 开发人员来说，并不是完全陌生的。显然，在创建和建立 XMLHttpRequest 对象时还可以做些事情，另外当响应函数完成了状态检查之后也可以有所作为。一般地，可以把这些标准调用包装在一个库中，以便在整个应用中使用，或者可以使用 Web 上提供的库。