现在位置: 首页 > 博客文章 > 电脑相关 > IT开发 > 开发语言 > Web > 正文
小 中 大
Ajax基础
2014年05月05日 00:20:57 ⁄ Web ⁄ 共 2761字 ⁄ 暂无评论 ⁄ 被围观 1,530次

AJAX不是一种语言，只是一种技术，不是新技术，只是一些已有技术的综合而已。

JS中的Ajax代码：

Code   ViewPrint
  1. // 创建异步请求对象  
  2. var xmlHttp;  
  3. function createXMLHttpRequest() {  
  4.     if (window.ActiveXObject) {  
  5.         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");  
  6.     } else if (window.XMLHttpRequest) {  
  7.         xmlHttp = new XMLHttpRequest();  
  8.     }  
  9. }  
  10.   
  11. // 点击超链调用函数  
  12. function showMsg() {  
  13.     // 创建异步请求对象  
  14.     createXMLHttpRequest();  
  15.     // 绑定Ajax回调处理函数，用于处理服务器端的相应  
  16.     xmlHttp.onreadystatechange = myFun;  
  17.     // 建立与服务器通信的连接  
  18.     xmlHttp.open("POST", "message");  
  19.     // 参数为null，如果get方式需要参数，直接用？传值即可。  
  20.     // 如果是post方式，有参数时即可在send中加入参数  
  21.     xmlHttp.send(null);  
  22. }  
  23.   
  24. // 回调处理函数  
  25. function myFun() {  
  26.     if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {  
  27.         document.getElementById("show").innerHTML = xmlHttp.responseText;  
  28.     }  
  29. }  

通过以上简单实例可以看出，要使用Ajax，首先需要创建异步请求对象，可以看出在不同的浏览器下，创建对象的方式有所不同。

创建对象完成后，需要绑定回调函数。然后是通过 GET 或者 POST 方式提交数据到服务器，如果是 GET 方式，有参数时直接用问号传值；如果是 POST 方式提交数据，有参数时，则把参数放到 send(参数) 中。如下：

Code   ViewPrint
  1. // 检查姓名（GET方式）  
  2. function checkname() {  
  3.     createXMLHttpRequest();  
  4.     xmlHttp.onreadystatechange = myFun;  
  5.     xmlHttp.open("GET", "regist?uname=" + document.getElementsByName("uname")[0].value);  
  6.     xmlHttp.send(null);  
  7. }  
Code   ViewPrint
  1. // 调用函数（POST方式）  
  2. function showMsg2() {  
  3.     // 创建异步请求对象  
  4.     createXMLHttpRequest();  
  5.     // 绑定Ajax回调处理函数，用于处理服务器端的相应  
  6.     xmlHttp.onreadystatechange = myFun;  
  7.     // JS进行转码  
  8.     var args = "uname=" + document.getElementsByName("uname2")[0].value;  
  9.     xmlHttp.open("POST", "mycode");  
  10.     // 参数为null，如果get方式需要参数，直接用？传值即可。  
  11.     // 如果是post方式，有参数时即可在send中加入参数  
  12.     xmlHttp.send(args);  
  13. }  

 

从后台返回的结果在 xmlHttp.responseText 中，用于前台画面的显示。

后台代码如下：

Code   ViewPrint
  1. package com.langtuteng.test;  
  2.   
  3. import java.io.IOException;  
  4. import java.io.PrintWriter;  
  5.   
  6. import javax.servlet.ServletException;  
  7. import javax.servlet.http.HttpServlet;  
  8. import javax.servlet.http.HttpServletRequest;  
  9. import javax.servlet.http.HttpServletResponse;  
  10.   
  11. public class MessageServlet extends HttpServlet {  
  12.   
  13.     public void doGet(HttpServletRequest request, HttpServletResponse response)  
  14.             throws ServletException, IOException {  
  15.   
  16.         response.setContentType("text/html");  
  17.         response.setCharacterEncoding("UTF-8");  
  18.         PrintWriter out = response.getWriter();  
  19.         out.println("你好，Ajax！(GET方式提交)");  
  20.         out.flush();  
  21.         out.close();  
  22.     }  
  23.   
  24.     public void doPost(HttpServletRequest request, HttpServletResponse response)  
  25.             throws ServletException, IOException {  
  26.   
  27.         response.setContentType("text/html");  
  28.         response.setCharacterEncoding("UTF-8");  
  29.         PrintWriter out = response.getWriter();  
  30.         out.println("你好，Ajax！(POST方式提交)");  
  31.         out.flush();  
  32.         out.close();  
  33.     }  
  34.   
  35. }  

 

分享到0
返回
Avatar photo

作者:

【上篇】
【下篇】

您可能还会对这些文章感兴趣！

  1. DJango 框架学习入门教程（一） —— DJango 框架简
  2. 38个基于Python的Web 开发框架
  3. 单独搭建一套WEB开发环境
  4. html中可以自定义输入的select下拉列表
  5. 用JavaSctipt保存div中的内容为图片
  6. Linux系统搭建Web服务器
  7. 网页下方的版权信息样式
  8. Html中引入Css样式
C中的位运算
买房时要了解这二十条事项
心灵励志方面的好书推荐
编程语言程序员工资
姐，你还好吗？
PHP中的迭代器用法
学习英文的好网站
程序员鼓励师火热招聘

给我留言

留言无头像?


插入图片

Copyright © 2010-2024 孟郎郎 辽ICP备19011093号