获得 res www 内容 col fun ase 页面
在使用过 JQuery 之后,再来看 JavaScript 的 Ajax 实现就会觉得很麻烦,不过,最近使用到了,就记录一下吧
在 JavaScript 中 Ajax 的实现可以分为四步:
第一步 得到 XMLHttpRequest 对象
得到 XMLHttpRequest
> 大多数浏览器都支持:var xmlHttp = new XMLHttpRequest();
> IE6.0:var xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
> IE5.5 以更早版本的 IE:var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
编写创建 XMLHttpRequest 对象的函数
- function createXMLHttpRequest() {
- try {
- return new XMLHttpRequest();
- } catch (e) {
- try {
- returnActvieXObject("Msxml2.XMLHTTP");//IE6.0}catch (e) {
- try {
- returnActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 }catch (e) {
- alert("浏览器不支持");
- throw e;
- }
- }
- }
- };
第二步 打开与服务器的链接
xmlHttp.open():用来打开与服务器的连接,它需要三个参数:
> 请求方式:可以是 GET 或 POST
> 请求的 URL:指定服务器端资源,例如一个 Servlet
> 请求是否为异步:如果为 true 表示发送异步请求,否则同步请求
- xmlHttp.open("GET", "/AServlet",true);
第三步 发送请求 (分为 GET 和 POST 方式)
* xmlHttp.send(null):如果不给可能会造成部份浏览器无法发送
> 参数:就是请求体内容!如果是 GET 请求,必须给出 null
第四步 给 XMLHttpRequest 对象的 onreadystatechange 事件注册监听器,以监听服务器响应
* 在 xmlHttp 对象的一个事件上注册监听器:onreadystatechange
* xmlHttp 对象一共有 5 个状态:
> 0 状态:刚创建,还没有调用 open() 方法;
> 1 状态:请求开始:调用了 open() 方法,但还没有调用 send() 方法
> 2 状态:调用完了 send() 方法了;
> 3 状态:服务器已经开始响应,但不表示响应结束了!
> 4 状态:服务器响应结束!(通常我们只关心这个状态!!!)
* 得到 xmlHttp 对象的状态:
> var state = xmlHttp.readyState;// 可能是 0、1、2、3、4
* 得到服务器响应的状态码
> var status = xmlHttp.status;// 例如为 200、404、500
* 得到服务器响应的内容
> var content = xmlHttp.responseText;// 得到服务器的响应的文本格式的内容
> var content = xmlHttp.responseXML;// 得到服务器的响应的 xml 响应的内容,它是 Document 对象了
- xmlHttp.onreadystatechange =function() {//xmlHttp的5种状态都会调用本方法
- if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断:判断是否为4状态,而且还要判断是否为200
- // 获取服务器的响应内容
- vartext = xmlHttp.responseText;
- }
- };
准备工作:在页面(jsp)中写两句 html,一个按钮,一个段落
- <input type="button" value="点击" id="btn" />
- <h1 id="h1">
- </h1>
先来看看 GET 方式的 Ajax:
- function createXMLHttpRequest() {
- try {
- return new XMLHttpRequest();
- } catch (e) {
- try {
- returnActvieXObject("Msxml2.XMLHTTP");//IE6.0}catch (e) {
- try {
- returnActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 }catch (e) {
- alert("浏览器不支持");
- throw e;
- }
- }
- }
- };
- window.onload =function() {
- varbtn=document.getElementById("btn");
- btn.onclick=function(){
- //第一步:得到XMLHttpRequest对象
- varxmlHttp = createXMLHttpRequest();
- //第二步:打开与服务器的连接xmlHttp.open("GET", "${pageContext.request.contextPath}/AServlet",true);
- //第三步:发送请求(GET方式必须指定null)xmlHttp.send(null);
- //第四步:给异步对象的onreadystatechange事件注册监听器xmlHttp.onreadystatechange =function() {
- //双重判断:状态4 响应码200
- if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
- //获得服务器的响应
- vartext = xmlHttp.responseText;
- //处理h1元素
- varh1 = document.getElementById("h1");
- h1.innerHTML = text;
- }
- };
- };
- };
获得 XMLHttpRequest 对象方式会有浏览器差异,所以 createXMLHttpRequest() 方法处理一下,在这里我使用的是 Servlet
AServlet 如下:
- import java.io.IOException;
- import javax.servlet.ServletException;
- import javax.servlet.http.HttpServlet;
- import javax.servlet.http.HttpServletRequest;
- import javax.servlet.http.HttpServletResponse;
- public class AServlet extends HttpServlet {
- public void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
- IOException {
- System.out.println("Hello Ajax");
- resp.setContentType("text/html;charset=utf-8");
- resp.getWriter().print("Hello Ajax");
- }
- public void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException,
- IOException {
- req.setCharacterEncoding("utf-8");
- System.out.println("POST(:)Hello Ajax");
- resp.setContentType("text/html;charset=utf-8");
- resp.getWriter().print("POST(:)Hello Ajax" + req.getParameter("userName"));
- }
- }
Servlet 完成的工作还算简单,值得说的是必须给 response 指定请求头 setContentType()
POST 方式的 Ajax 提交方式:
- function createXMLHttpRequest() {
- try {
- return new XMLHttpRequest();
- } catch (e) {
- try {
- returnActvieXObject("Msxml2.XMLHTTP");//IE6.0}catch (e) {
- try {
- returnActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 }catch (e) {
- alert("浏览器不支持");
- throw e;
- }
- }
- }
- };
- window.onload =function() {
- varbtn=document.getElementById("btn");
- btn.onclick=function(){
- //第一步:得到XMLHttpRequest对象
- varxmlHttp = createXMLHttpRequest();
- //第二步:打开与服务器的连接xmlHttp.open("POST", "${pageContext.request.contextPath}/AServlet",true);
- //POST方式需要处理请求头xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded");
- //第三步:发送请求xmlHttp.send("userName=lz");
- //第四步:给异步对象的onreadystatechange事件注册监听器xmlHttp.onreadystatechange =function() {
- //双重判断:状态4 响应码200
- if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
- //获得服务器的响应
- vartext = xmlHttp.responseText;
- //处理h1元素
- varh1 = document.getElementById("h1");
- h1.innerHTML = text;
- }
- };
- };
- };
与 GET 方式不同的之处在于 POST 需要处理请求头,使用 send() 方法时需要给出需要的参数,就是这两点不同吧
因为 JavaScript 的 Ajax 处理较为麻烦且固定,在这里完成一个简单封装,类似于 JQuery 中的 $.ajax() 方法的实现
ajaxUtils.js :
- //处理浏览器差异,获得XMLHttpRequest
- function createXMLHttpRequest(){
- try{
- return newXMLHttpRequest();//大多数浏览器}catch (e) {
- try {
- returnActvieXObject("Msxml2.XMLHTTP");//IE6.0}catch (e) {
- try {
- returnActvieXObject("Microsoft.XMLHTTP");//IE5.5及更早版本 }catch (e) {
- alert("浏览器不支持");
- throw e;
- }
- }
- }
- }
- /*
- * option对象有如下属性
- */
- /*请求方式method,*/
- /*请求的url url,*/
- /*是否异步 asyn,*/
- /*请求体 params, */
- /*回调方法 callback,*/
- /*服务器响应数据转换成什么类型 type*/
- /*url和callback没有默认值,必须指定*/
- function ajax(option){
- /**
- * 1.得到XMLHttpRequest
- */
- varxmlHttp=createXMLHttpRequest();
- /**
- * 2.打开连接
- */
- if(!option.method){//默认为GET请求option.method="GET";
- }
- if(option.asyn==undefined){//默认为异步option.asyn=true;
- }
- xmlHttp.open(option.method, option.url, option.asyn);
- /**
- * 3.判断是否为POST
- */
- if("POST" == option.method) {
- xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
- }
- /**
- * 4.发送请求
- */
- xmlHttp.send(option.params);
- /**
- * 5.注册监听
- */
- xmlHttp.onreadystatechange=function(){
- if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {//双重判断
- var data;
- // 获取服务器的响应数据,进行转换!
- if(!option.type) {//如果type没有赋值,那么默认为文本data = xmlHttp.responseText;
- } else if(option.type == "xml") {
- data = xmlHttp.responseXML;
- } else if(option.type == "text") {
- data = xmlHttp.responseText;
- } else if(option.type == "json") {
- vartext = xmlHttp.responseText;
- data = eval("(" + text + ")");
- }
- // 调用回调方法
- option.callback(data);
- }
- };
- };
我们直接在页面中使用 ajax() 方法即可,注意 url 和 callback 没有默认值, 必须指定
页面中使用:
- <script type="text/javascript" src="${pageContext.request.contextPath}/js/ajaxUtils.js">
- </script>
- <script type="text/javascript">
- window.onload = function() {
- var btn = document.getElementById("btn");
- btn.onclick = function() {
- ajax({
- url: "${pageContext.request.contextPath}/AServlet",
- callback: function(data) {
- document.getElementById("h1").innerHTML = data;
- }
- });
- };
- };
- </script>
data 就是服务器返回的数据
JavaScript 笔记——使用 AJax
来源: http://www.bubuko.com/infodetail-2149893.html