Ajax要点总结和编程示例

前端之家收集整理的这篇文章主要介绍了Ajax要点总结和编程示例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

1、ajax是什么?

(asynchronous javascript and xml 异步的javascript和xml)
ajax是一种用来改善用户体验的技术,其实质是利用浏览器提供的一个特殊的对象(XMLHttpRequest对象,一般称之为ajax对象)异步地(当ajax对象向服务器发请求时,浏览器不会销毁当前页面用户仍然可以对当前页面做其它的操作)向服务器发送请求。服务器返回的数据不再是一个完整的新的页面,而是部分数据,利用这些数据,更新当前页面。整个过程,页面无刷新,不打断用户的操作。

2、如何获得ajax对象?

XMLHttpRequest没有标准化,要区分浏览器。
  1. function getXhr(){
  2. var xhr = null;
  3. if(window.XMLHttpRequest){
  4. //非ie浏览器
  5. xhr = new XMLHttpRequest();
  6. }else{
  7. //ie浏览器
  8. xhr = new ActiveXObject('MicroSoft.XMLHttp');
  9. }
  10. return xhr;
  11. }

3、ajax对象的重要的属性

1)onreadystatechange:绑订事件处理函数,当ajax对象的readyState值发生了改变,就会产生readystatechange事件。
2)responseText:获得服务器返回的文本。
3)responseXML:获得服务器返回的xml文档。
4)status:状态码
5)readyState:有5个值,分别是0,1,2,3,4,表示ajax对象与服务器通信的状态。比如,当值为4时,表示ajax对象获得了服务器返回的所有的数据。

4、编程步骤

step1,获得ajax对象。
比如:
var xhr = getXhr();
step2,使用ajax对象发请求。
1)发送get请求
xhr.open('get','check_username.do?username=tom',true);
xhr.onreadystatechange=f1;
xhr.send(null);
2)发送post请求
xhr.open('post','check_username.do',true);
xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
xhr.onreadystatechange=f1;
xhr.send('username=tom');
注意:
因为按照http协议要求,发送post请求必须添加一个content_type消息头。ajax对象默认不会添加这个消息,所需要调用setRequestHeader方法添加一个"content-type"消息头。
true:发送异步请求(ajax对象发请求时,浏览器不会销毁当前页面用户仍然可以做其它操作)。
false:发送同步请求(ajax对象发请求时,浏览器不会销毁当前页面,浏览器会锁定当前页面用户不能操作当前页面)。
step3,编写服务器端的处理代码,一般不再需要返回一个完整的页面,只需要返回部分数据。
step4,编写事件处理函数
function f1(){
if(xhr.readyState == 4){
var txt = xhr.responseText;
更新当前页面
}
}

5、实例(分别使用get请求和post请求方式,验证用户名是否存在)

项目结构图:


准备工作(使用prototype.js和自定义的my.js)

prototype.js:在对常用的JavaScript语句进行封装的框架,可简化代码。在这里下载。

my.js:用户获取ajax对象,通用性代码提取到一个js文件

  1. /*获得ajax对象*/
  2. function getXhr() {
  3. var xhr = null;
  4. if (window.XMLHttpRequest) {
  5. // 非ie浏览器
  6. xhr = new XMLHttpRequest();
  7. } else {
  8. // ie浏览器
  9. xhr = new ActiveXObject('MicroSoft.XMLHttp');
  10. }
  11. return xhr;
  12. }
register.jsp:
  1. <%@ page language="java" contentType="text/html; charset=utf-8"
  2. pageEncoding="utf-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <style>
  7. .tips {
  8. color: red;
  9. }
  10. </style>
  11. <script type="text/javascript" src="js/my.js"></script>
  12. <script type="text/javascript" src="js/prototype.js"></script>
  13. <script type="text/javascript">
  14. function check_username() {
  15. //1、获得ajax对象
  16. var xhr = getXhr();
  17. //2、发请求
  18. var url = 'check_username.do?username=' + $F('username');
  19. xhr.open('get',encodeURI(url),true);
  20. xhr.onreadystatechange = function() {
  21. if (xhr.readyState == 4) {
  22. if (xhr.status == 200) {//服务器正常处理了请求
  23. //必须要等到ajax对象获取到了服务器返回的所有数据时才执行
  24. var txt = xhr.responseText;
  25. //alert(txt);
  26. //利用服务器返回的数据更新当前页面
  27. $('username_msg').innerHTML = txt;
  28. } else {
  29. $('username_msg').innerHTML = '验证出错..';
  30. }
  31. }
  32. };
  33. $('username_msg').innerHTML = "正在检查...";
  34. xhr.send(null);
  35. }
  36.  
  37. function check_username_post() {
  38. //1、获得ajax对象
  39. var xhr = getXhr();
  40. //2、发请求
  41. xhr.open('post',true);
  42. xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
  43. xhr.onreadystatechange = function() {
  44. if (xhr.readyState == 4) {
  45. var txt = xhr.responseText;
  46. $('username_msg').innerHTML = txt;
  47. }
  48. };
  49. xhr.send('username=' + $F('username'));
  50. }
  51. </script>
  52. </head>
  53. <body>
  54. <form action="regist.do" method="post">
  55. <fieldset>
  56. <legend>注册</legend>
  57. 用户名<input id="username" name="username" onblur="check_username_post();" /><span
  58. class="tips" id="username_msg"></span><br />
  59. 真实姓名:<input name="name" /><br />
  60. <input type="submit" value="提交">
  61. </fieldset>
  62. </form>
  63. </body>
  64. </html>
ActionServlet.java:处理类
  1. import java.io.IOException;
  2. import java.io.PrintWriter;
  3.  
  4. import javax.servlet.ServletException;
  5. import javax.servlet.http.HttpServlet;
  6. import javax.servlet.http.HttpServletRequest;
  7. import javax.servlet.http.HttpServletResponse;
  8.  
  9. public class ActionServlet extends HttpServlet {
  10. private static final long serialVersionUID = 1L;
  11. private PrintWriter out;
  12.  
  13. protected void service(HttpServletRequest request,HttpServletResponse response) throws ServletException,IOException {
  14. response.setCharacterEncoding("utf-8");
  15. out = response.getWriter();
  16. String uri = request.getRequestURI();
  17. String action = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
  18. if ("/check_username".equals(action)) {
  19. String username = request.getParameter("username");
  20. // 省略数据库查找并对比逻辑
  21. if (username.equals("zs")) {
  22. out.println("用户名已存在");
  23. } else {
  24. out.println("用户名可用");
  25. }
  26. }
  27. out.close();
  28. }
  29. }
web.xml中配置:
  1. <servlet>
  2. <servlet-name>ActionServlet</servlet-name>
  3. <servlet-class>web.ActionServlet</servlet-class>
  4. </servlet>
  5. <servlet-mapping>
  6. <servlet-name>ActionServlet</servlet-name>
  7. <url-pattern>*.do</url-pattern>
  8. </servlet-mapping>
发布并访问http://localhost:8080/AjaxTest/register.jsp,运行效果如下:(用户名输入zs失去焦点后弹出“用户名已存在”,输入其他内容失去焦点后显示用户名可用”)


6、编码问题

1)发送get请求
ie浏览器提供的ajax对象会对中文按照gbk进行编码,其它浏览器会对中文按照utf-8进行编码。容器(比如tomcat)默认情况下会使用iso-8859-1去解码。
解决方式:
step1,让容器按照指定的字符集去解码。修改tomcat的配置文件(conf/server.xml)
<Connector URIEncoding="utf-8">
以上配置的作用是,容器对所有的get请求中的参数使用utf-8进行编码。(仅对get请求有效
step2,使用encodeURI函数中文进行编码。
2)发送post请求
所有浏览器内置的ajax对象都会使用utf-8进行编码。容器(比如tomcat)默认情况下会使用iso-8859-1去解码。
解决方式:
request.setCharacterEncoding("utf-8");

7、ajax编程中遇到的问题

1)缓存问题
当使用IE浏览器时,ajax对象会检查请求地址,如果地址没有变化,不会向服务器发请求。
解决方式:
在请求地址后面加一个随机数,比如:
xhr.open('get','getNumber.do?'+Math.random(),true);

或者,也可以改为用post方式发请求。
2)当服务器进行一个比较耗时的操作,可以在 send方法执行前添加一个提示
比如:
$('spanId').innerHTML = '正在验证...';
3)当服务器执行时,出现了异常。
可以通过读取状态码来获知服务器是否出现了异常。
比如:
if(xhr.status == 200){
正确
}else{
错误处理...
}

4)同步请求(扩展)
a.什么是同步请求?
当ajax对象再向服务器发送请求时,浏览器会锁定当前页面用户不能对当前页面做其他操作,必须等服务器的响应发送回来,浏览器才会向下继续执行。
b.如何发送同步请求?
xhr.open('get/post','...do',false);

8、ajax的优点

(1)不打断用户的操作,页面无刷新。
(2)按照需要获取数据,浏览器与服务器之间数据传输量大大减少,性能会提高。
(3)是一种标准化的技术,不需要浏览器下载任何的插件(比如,Flex需要下载插件)。

转载请注明出处:

http://www.jb51.cc/article/p-udssymrb-cb.html

猜你在找的Ajax相关文章