Ajax笔记1
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Ajax笔记1相关的知识，希望对你有一定的参考价值。
Ajax用于与服务器进行异步交互，实现页面的动态局部刷新，Ajax有一个关键对象XMLHttpRequest，学习Ajax关键是掌握XMLHttpRequest的操作方法
Ajax的使用步骤
1.创建XMLHttpRequest对象
Ajax有一个关键的对象XMLHttpRequest，不同浏览器对该对象的创建方式不一样
//一般浏览器支持下面这种方式 var xhr = new XMLHttpRequest(); //IE6,IE5支持下面这种方式 var xhr = new ActiveXObject("Microsoft.XMLHTTP");
在javascript中可以对此创建方法进行封装，代码如下：
function getXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ return new ActiveXObject("Microsoft.XMLHTTP"); } }
还有另一种方式
function getXhr(){ try{ return new XMLHttpRequest(); }catch(e){ try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ throw e; } } } }
2.与服务器建立连接
创建对象之后，要使用xhr.open(method, url, asyc)打开与服务器的连接，
open这个方法有三个参数：
1.第一个参数是请求方式：可以是"GET"或"POST"，注意是字符串形式
2.第二个参数是请求的url：可以是servlet的地址
3.第三个参数是是否异步请求：true代表异步请求，false代表非异步请求
注意：当请求方式为为“POST”时，要设置请求头
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded")
3.向服务器发送请求
建立连接之后，使用xhr.send(context)向服务器发送请求，参数为请求体
不同的请求方式，会send的参数会有所不同。
1.当请求方式是“GET”时，参数应该写“null”，即
xhr.send(null);
2.当请求方式是“POST”时，参数是请求体。当用户登陆时，可以用下面这种方式发送用户信息
xhr.send("username=example&passwd=123456677")
4.获取请求结果
此时要监听XMLHttpRequest的onreadystatechange事件，然后执行一些响应事件
这一步还要知道三个XMLHttpRequest的四个属性：
1.readyState
XMLHttpRequest对象存在五个状态，具体请看http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_onreadystatechange.asp
五个状态分别对应数字0，1，2，3，4。具体应用中只需要关心4这个状态，代表着请求已完成，且响应已就绪
2.status
这个属性代表服务器的响应状态码，常见的状态码有200，404，500。
使用给属性时一般使用200这个状态码，代表着服务器响应完成
3.responseText
通过它得到服务器响应的文本内容
4.responseXML
通过它得到服务器响应的xml内容
代码实例：
//得到xmlHttp对象的状态： var state = xhr.readyState; //得到服务器响应的状态码： var status = xhr.status; //得到服务器响应的内容 var content = xhr.responseText; //得到服务器响应的文本内容 var content = xhr.responseXML; //得到服务器响应的xml内容
Ajax应用实例
首先编写一个AjaxServlet，这里使用doGet方法处理请求，返回“ajax test”文本内容
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().print("ajax test");
}
再编写一个ajaxtest.jsp页面
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!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> </head> <script type="text/javascript"> //创建XMLHttpRequest对象function getXhr(){ if(window.XMLHttpRequest){ return new XMLHttpRequest(); }else{ return new ActiveXObject("Microsoft.XMLHTTP"); } } //文档加载完毕时执行以下内容 window.onload = function(){ var butt = document.getElementById("button"); butt.onclick = function(){ var xmlHttp = getXmlHttp(); xmlHttp.open("GET","<c:url value=‘/AjaxServlet‘/>",true); xmlHttp.send(null); xmlHttp.onreadystatechange = function(){ //readyState==4时，表示服务器响应结束；status==200时，表示服务器响应完成 if(xmlHttp.readyState == 4 && xmlHttp.status == 200){ var content = xmlHttp.responseText; var elem = document.getElementById("div"); elem.innerHTML = content; } }; }; }; </script> <body> <button id="button">send request</button> <div id="div"></div> </body> </html>
运行程序
点击按钮之后
下一篇记录对ajax的封装，JQuery的ajax()方法就对Ajax进行了很好的封装
以上是关于Ajax笔记1的主要内容，如果未能解决你的问题，请参考以下文章