AJAX基础

来源：互联网发布：瞻博网络工厂编辑：程序博客网时间：2024/06/09 15:50

Ajax(Asynchronous JavaScript And Xml）允许浏览器与服务器，在不重新加载整个页面的情况下，交换数据并更新部分网页。Ajax的核心是JavaScript对象XMLHttpRequest，该对象可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。

一、AJAX的原理

AJAX采用异步交互过程。XMLHttpRequest是XMLHTTP组件的对象，通过这个对象，AJAX可以像桌面应用程序一样只同服务器进行数据层面的交换。
这里写图片描述

二、XMLHttpRequest对象的创建

XMLHttpRequest 对象用于在后台与服务器交换数据。可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

//创建一个XMLHttpRequest对象var ajax = new XMLHttpRequest();

但是，某些浏览器是不支持创建XMLHttpRequest对象的，则我们则可以创建ActiveXObject 对象。

//编写一个方法来创建XMLHttpRequest对象function createAJAX(){    var ajax = null;    if(window.XMLHttpRequest){        ajax = new XMLHttpRequest()    }eles if(){        ajax = new ActiveXObject("Microsoft.XMLHTTP");    }eles{        alert("该浏览器不支持AJAX");    }    return ajax;}

三、XMLHttpRequest对象的方法

（一）open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

method：设置请求的类型，GET 或 POST
url：提交请求目的的url。在多次提交请求的时候，有些浏览器对于同一个URL的请求会就会，调用上一次的请求的缓冲。把当前时间戳追加到URL的最后，就能确保URL的惟一性，从而避免获得浏览器缓存结果。
async：表示请求是否要异步传输，默认值为true(异步)。指定true，在读取后面的脚本之前，不需要等待服务器的相应。指定false，当脚本处理过程经过这点时，会停下来，一直等到Ajax请求执行完毕再继续执行。

（二）send(string)

将请求发送到服务器。该方法的string参数，只用于post提交方式。因为POST方法的参数是在当请求体当中的，get方法的提交的参数是在url当中的。

（三）setRequestHeader(“header”, “value”)

向请求添加 HTTP 头。

header: 规定头的名称
value: 规定头的值

当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。Ajax 请求中，发送首部信息的工作可以由 setRequestHeader完成。
如果用 POST 请求向服务器发送数据，需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据，并且数据已经符合URL编码了。该方法必须在open()之后才能调用。

（四）方法的使用

下面，在一个jsp页面，使用了XMLHttpRequest对象的方法实现了GET和POST提交请求到服务器。
这里使用了 jQuery基础、javascript基础、jsp基础，不懂的话可以查看我相应的博客。

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><script src="js/jquery-3.2.1.js"></script></head><body>        <button id="b1">点击</button>         <button id="b2">点击</button> </body><script>        //创建一个XMLHttpReques对象        function createAJAX(){            var ajax = null;            //如果支持XMLHttpReques对象，则创建。反之，则创建ActiveXObject对象            if(window.XMLHttpRequest){                ajax = new XMLHttpRequest();            }else{                ajax = new ActiveXObject("Microsoft.XMLHTTP");            }            return ajax;        };        //b1点击事件函数        $("#b1").click(function(){            //1、用GET方法发送带参数的请求到服务器            //获得ajax对象            var ajax = createAJAX();            //提交到一个Servlet中,GET方法在url中提交参数。并且防止获得缓存结果,加上一个time参数，保证url的唯一性。            ajax.open("GET","Servlet?param1=value1&param2=value2&time="+new Date()getTime(),true);            ajax.send();        });        //b2点击事件函数        $("#b2").click(function(){                //1、用POST方法发送带参数的请求到服务器            //获得ajax对象            var ajax = createAJAX();            //提交到一个Servlet中            ajax.open("POST","ProcessingServlet",true);            //使用 setRequestHeader() 来添加 HTTP 头。            ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded")；            //POST方法在请求体当中提参数            ajax.send("param1=value1&param2=value2");        });     </script></html>

四、XMLHttpRequest对象的属性

这里写图片描述

（一）onreadystatechange事件触发器（实际上不属于属性）

在 Ajax 执行过程中，服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。
每次 readyState 属性的改变都会触发 readystatechange事件。该事件处理函数由服务器触发，而不是用户

<script>//部分代码        //创建一个XMLHttpReques对象        function createAJAX(){            var ajax = null;            //如果支持XMLHttpReques对象，则创建。反之，则创建ActiveXObject对象            if(window.XMLHttpRequest){                ajax = new XMLHttpRequest();            }else{                ajax = new ActiveXObject("Microsoft.XMLHTTP");            }            return ajax;        };        ajax = createAJAX();        //当服务做出相应的时候，就会调用该方法        ajax.onreadystatechange = function(){            alert("ajax状态改变了！");        }</script>

（二）readyState状态属性、status状态码、statusText状态文本信息

1、readyState 属性表示Ajax请求的当前状态。它的值用数字代表。

每次 readyState 值的改变，都会触发 readystatechange 事件。readyState 值的变化会因浏览器的不同而有所差异。当请求结束的时候， readyState 的值统一为 4。

0 代表未初始化。还没有调用 open 方法
1 代表正在加载。 open 方法已被调用，但 send 方法还没有被调用
2 代表已加载完毕。send 已被调用。请求已经开始
3 代表交互中。服务器正在发送响应
4 代表完成。响应发送完毕

2、status

服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息，并且属于超文本传输协议中的一部分。在 XMLHttpRequest 对象中，服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 比较，可以确保服务器是否已发送了一个成功的响应。
常用状态码及其含义：

404 没找到页面(not found)
403 禁止访问(forbidden)
500 内部服务器出错(internal service error)
200 一切正常(ok)
304 没有被修改(not modified)(服务器返回304状态，表示源文件没有被修改 )

3、statusText

服务器返回的状态文本信息。

（三）responseText、responseXML响应属性

1、responseText

responseText 属性包含了服务器返回字符串形式的响应。当 readyState 属性值变成 4 时, responseText 属性才可用，表明 Ajax 请求已经结束。

2、responseXML

如果服务器返回的是 XML，那么数据将储存在 responseXML 属性中。只要服务器发送了带有正确首部信息的数据时， responseXML 属性才是可用的。 MIME 类型必须为 text/xml

（三）XMLHttpRequest对象属性的使用

AJAX实质上也是遵循B/S模式，所以这个框架基本的流程是：: 对象初始化
发送请求
服务器接收
服务器响应
客户端接收
修改客户端页面内容。

现在，我们试着用ajax来和一个servlet服务端来请求当前时间。并将服务器返回的时间，显示出来。

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><script src="js/jquery-3.2.1.js"></script></head><body>        <button id="b1">点击</button>             <span id="s1">当前时间为：</span></body><script>        function createAJAX(){            var ajax = null;            //如果支持XMLHttpReques对象，则创建。反之，则创建ActiveXObject对象            if(window.XMLHttpRequest){                ajax = new XMLHttpRequest();            }else{                ajax = new ActiveXObject("Microsoft.XMLHTTP");            }            return ajax;        };        $("#b1").click(function(){            var ajax = createAJAX();            if(ajax!=null){                //准备发送                ajax.open("GET","${pageContext.request.contextPath}/Servlet");                //发送到服务端，假如请求体没有数据则参数为null                ajax.send(null);                //ajax异步对象不断监听服务器响应                ajax.onreadystatechange = function(){                    //判断ajax异步对象的的状态变化                    // readyState 属性值变成 4 时，表明 Ajax 请求已经结束                    //status为200时，表忙Ajas的请求一切都完好                    if(ajax.readyState ==4                            &&ajax.status==200){                            //从ajax异步对象中获取服务端的响应信息                            var date = ajax.responseText;                            //这里就完整地实现了与服务器之间进行了数据的交流，不用刷新整个页面，却改变html页面部分                            $("#s1").html("当前时间为:"+date);                        }                }            }        });</script></html>

servlet对ajax的请求做出的响应

package servlet;import java.io.File;import java.io.IOException;import java.io.PrintWriter;import java.text.SimpleDateFormat;import java.util.Date;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;@WebServlet("/Servlet")public class Servlet extends HttpServlet {    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        //获取当前的时间，返回给ajax        SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");        String date = sdf.format(new Date());        //设置编码格式        response.setContentType("text/html;charset=utf-8");        //返回给ajax数据，是需要使用输出流的        PrintWriter pw = response.getWriter();        pw.write(date);        pw.flush();        pw.close();    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        doGet(request, response);    }}

五、jQuery.ajax(url,[settings])（jQuery 底层 AJAX 实现）

很明显，使用AJAX步骤比较繁琐，我们可以使用jQuery的ajax(url,[settings])减少一些步骤。

JQuery的ajax(url,[settings])方法，简单易用的高层实现见 .get,.post 等。
该方法返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函，除非你需要操作不常用的选项，以获得更多的灵活性。最简单的情况下，$.ajax()可以不带任何参数直接使用。
注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

url:一个用来包含发送请求的URL字符串。
settings:AJAX 请求设置。所有选项都是可选的。

（一）回调函数

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

（二）一些settings选项的介绍

1、async

(默认: true) 默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

2、complete(XHR, TS)

请求完成后回调函数 (请求成功或失败之后均调用)。参数： XMLHttpRequest 对象和一个描述成功请求类型的字符串。 Ajax 事件。

function (XMLHttpRequest, textStatus) {    // }

3、statusCode

一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。例如，如果响应状态是404，将触发以下警报：

$.ajax({  statusCode: {404: function() {    alert('page not found');  }});

4、success(data, textStatus, jqXHR)

请求成功后的回调函数。参数：由服务器返回，并根据dataType参数进行处理后的数据；描述状态的字符串。还有 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest）对象。每个函数将被依次调用。 Ajax 事件。

function (data, textStatus) {    //}

5、type

(默认: “GET”) 请求方式 (“POST” 或 “GET”)，默认为 “GET”。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

6、url

(默认: 当前页地址) 发送请求的地址。

7、data

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。

8、error

请求失败时调用此函数。有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。如果发生了错误，错误信息（第二个参数）除了得到null之外，还可能是”timeout”, “error”, “notmodified” 和 “parsererror”。Ajax 事件。

function (XMLHttpRequest, textStatus, errorThrown) {    // }

9、dataType

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如XML MIME类型就被识别为XML。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

“xml”: 返回 XML 文档，可用 jQuery 处理。
“html”: 返回纯文本 HTML 信息；包含的script标签会在插入dom时执行。
“script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了”cache”参数。”’注意：”’在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)
“json”: 返回 JSON 数据。
“jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
“text”: 返回纯文本字符串

（三）ajax(url,[settings])方法的使用

前面，我们使用ajax想服务器请求当前的时间，需要写一大段代码，限制我们使用ajax(url,[settings])方法。

<%@ page language="java" contentType="text/html; charset=utf-8"    pageEncoding="utf-8"%><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><!-- 导入jQuery包 --><script src="js/jquery-3.2.1.js"></script></head><body>    <form id="form1">        <input name="username" type="text" />        <input name="password" type="password" />        <button id="b1" type="submit">登陆</button>    </form></body><script>        //1、现在我们只需要少量的代码就能实现，前面想服务器请求当前的时间的功能        $.ajax({            //设置请求类型，get类型是默认类型，可以省略            type:"GET",            //设置请求url            url:"Servlet",            //请求成功回调函数，用于显示服务的响应            success: function(data){                alert(data);            },            //请求失败回调函数            error: function(){                alert("请求失败");            }        });        //这里也可以使用ajax对象的responseText，来获取服务器的响应        var resp = $.ajax({            url:"Servlet",            //同步加载数据。发送请求时锁住浏览器。需要锁定用户交互操作时使用同步方式。            async: false,        }).responseText;        alert(resp);        //2、向服务器提交参数        $.ajax({            //设置请求方式            type: "POST",            //设置请求url            url: "Servlet",            //提交发送到服务器的数据           data: "name=John&location=Boston",           success: function(msg){               alert( "Data Saved: " + msg );            }           });        //提交一个表单到servlet        $("#b1").click(function(){        $.ajax({            //设置请求方式            type:"POST",            //设置请求url            url:"Servlet",            //提交发送到服务器的数据，将表单内容序列化为字符串，用于 Ajax 请求。            data:$("#form1").serialize(),            success: function(){                alert("请求成功");            }        })    });</script></html>

更过详细信息参考 jQuery api

注：ajax请求到后台的servlet类中，servlet类转发请求，和重定向都不会生效。至于为什么不能跳转不是很清楚。但是可以从ajax的应用上去解释，之所以用ajax就是为了页面不刷新的状态下，改变页面局部。所以当然也就不能跳转。
当然，也可以通过ajax的回调函数，来获取servlet的输入的url，通过widow.location.href来进行页面的转发。

阅读全文

0 0