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

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样式
WordPress中添加置顶功能
大数据学习初级入门教程（三） —— Kafka 2.2.0 单节点的安装、启动和测试
使用 memcached 解决 tomcat 的 session 一致性问题
IE浏览器窗口的最大化
操作系统图形界面发展史(1981-2009)
不愿回忆的和声
Ajax基础
Intellij IDEA 初学入门图文教程（一） —— 介绍、下载和安装

给我留言

留言无头像?


插入图片

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