Ajax 异步加载解析

分类：Ajax作者：编程之家用户

AJAX （Asynchronous JavaScript and XML，异步的 JavaScript 和 XML）。它不是新的编程语言，而是一种使用现有标准的新方法，是在不重新加载整个页面的情况下与服务器交换数据并更新部分网页的艺术。
那么，让我们一起走进AJax的世界吧。

基础语法

学习Ajax之前，我们要明确自己的需求，那就是在不刷新页面的前提下实现异步的与服务器进行交互，更新页面信息。使用Ajax其实也是很简单的，我们只需要遵循一定的步骤即可。
 •创建Ajax对象（原生的需要判断当前浏览器的类型）
 •设置回调函数 （完成与服务器的交互之后所触发的函数）
 •打开请求，并发送。（根据请求方式的不同，代码书写稍有不同）
 •客户端获得反馈数据，更新页面 

获取Ajax对象

不同的浏览器对Ajax的支持是不一致的，所以我们要区别的对待。

设置回调函数

设置回调函数的目的就是在Ajax完成与服务器的交互之后，将获取到的数据信息，添加到页面上。

通常我们会指定onreadystatechange函数作为我们的回调处理函数。

相关于Ajax与服务器交互有如下状态信息供我们在编码的过程找中参考。

.readystate

关于加载状态有如下几个常用的数值：
 •0: 请求未初始化
 •1: 服务器连接已建立
 •2: 请求已接收
 •3: 请求处理中
 •4: 请求已完成，且响应已就绪 

.status

加载结果的状态信息有：
 •200： “OK”

 •404： “未找到此页面”

 开启交互

一谈起交互，映入脑海的就是双方。也就是我们的ajax客户端和服务器之间的交互。所以我们需要明确请求数据在服务器上的位置

open(method,url,async) 

url的使用会根据method的不同而不同，这一点我们务必要清楚。至于asynchronous这个参数，一般来说对于数据量很小的请求可以采用false，但是建议使用true来进行异步的加载，来避免服务器压力过大。

 •GET方式 

只是用这种方式很简单，指定url在服务器上的位置即可。这里红色部分的理解相当的重要。我们务必指定url为请求在服务器上的位置，一般采用绝对路径的方式。

// 对Servlet来说指定其注解上的位置即可
xmlhttp.open("GET","/Test/servlet/AjaxServlet?userinput="+str.value,true);
  xmlhttp.send();

 •POST方式 

使用POST方式的时候，我们需要额外的多一项处理。如下例：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 在send方法中指定要传输的参数信息即可
xmlhttp.send("fname=Bill&lname=Gates");

客户端更新页面

对于Ajax来说，顾名思义。是采用xml形式来传输数据的。但是目前而言，这不再是唯一的一种形式了。那么我们怎么将获取到的数据更新到网页上呢？有如下两种方式。
 •如果来自服务器的响应并非 XML，请使用 responseText 属性。
 document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

 •如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用 responseXML 属性： 

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
 {
 txt=txt + x[i].childNodes[0].nodeValue + "<br />";
 }
document.getElementById("myDiv").innerHTML=txt;

实例体验

了解了这些基础语法之后，我们就可以在实际的开发中简单的应用了。为了更好的完成此次实验，我先做了一个简单的JavaWeb，来处理我们的Ajax请求。

使用Servlet方式

AjaxServlet.java

package one;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class AjaxServlet
 */
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
 private static final long serialVersionUID = 1L;

 /**
  * @see HttpServlet#HttpServlet()
  */
 public AjaxServlet() {
  super();
  // TODO Auto-generated constructor stub
 }

 /**
  * @see HttpServlet#doGet(HttpServletRequest request,HttpServletResponse
  *  response)
  */
 protected void doGet(HttpServletRequest request,HttpServletResponse response)
   throws ServletException,IOException {
  // TODO Auto-generated method stub
  //response.getWriter().append("Served at: ").append(request.getContextPath());
  String userinput = request.getParameter("userinput");
  System.out.println("客户端连接！");
  System.out.println("请求信息为：" + userinput);
  PrintWriter out = response.getWriter();
  if(userinput.equals("") || userinput.length()<6) {
   response.setContentType("text/html;charset=UTF-8");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Content-Type","text/html;charset=utf-8");
   out.write("<h3>the length of input string must be more than 6!</h3>");
  }else{
   response.setContentType("text/html;charset=UTF-8");
   response.setCharacterEncoding("UTF-8");
   response.setHeader("Content-Type","text/html;charset=utf-8");
   out.println("<h3>Correct!</h3>");
  }
  out.close();
 }

 /**
  * @see HttpServlet#doPost(HttpServletRequest request,HttpServletResponse
  *  response)
  */
 protected void doPost(HttpServletRequest request,IOException {
  // TODO Auto-generated method stub
  doGet(request,response);
 }

}

 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" id="WebApp_ID" version="3.0">
 <display-name>Test</display-name>
 <welcome-file-list>
 <welcome-file>index.html</welcome-file>
 <welcome-file>index.htm</welcome-file>
 <welcome-file>index.jsp</welcome-file>
 <welcome-file>default.html</welcome-file>
 <welcome-file>default.htm</welcome-file>
 <welcome-file>default.jsp</welcome-file>
 </welcome-file-list>

 <servlet>
 <servlet-name>AjaxServlet</servlet-name>
 <servlet-class>one.AjaxServlet</servlet-class>
 </servlet>
 <servlet-mapping>
 <servlet-name>AjaxServlet</servlet-name>
 <url-pattern>/servlet/AjaxServlet</url-pattern>
 </servlet-mapping>
</web-app>

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
</head>
<body>
<div>
 <h2>AJAX Test</h2>
 <input type="text" name="userinput" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)">
 <br>
 <span id="ajax_result"></span>
 <script>
 getResult = function(str){
  var httpxml;
  if(0 == str.value.length) {
   document.getElementById("ajax_result").innerHTML = "Nothing"; 
  } 
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  }else{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function(){
   if(4 == xmlhttp.readyState && 200 == xmlhttp.status) {
    document.getElementById("ajax_result").innerHTML = xmlhttp.responseText;
   }
  }

  xmlhttp.open("GET",true);
  xmlhttp.send();

  }
 </script>
</div>
</body>
</html>

实验结果
 •长度小于6时：

 •长度大于等于6：

使用JSP方式

receiveParams.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %> 
<% 
  //接收参数 
  String userinput = request.getParameter("userinput"); 
  //控制台输出表单数据看看 
  System.out.println("userinput =" + userinput); 
  //检查code的合法性 
  if (userinput == null || userinput.trim().length() == 0) { 
    out.println("code can't be null or empty"); 
  } else if (userinput != null && userinput.equals("admin")) { 
    out.println("code can't be admin"); 
  } else { 
    out.println("OK");
  } 
%>

ajax.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax测试</title>
</head>
<body>
<div>
 <h2>AJAX Test</h2>
 <input type="text" name="userinput" placeholder="用户输入，Ajax方式获得数据" onblur="getResult(this)">
 <br>
 <span id="ajax_result"></span>
 <script>
 getResult = function(str){
  var httpxml;
  if(0 == str.value.length) {
   document.getElementById("ajax_result").innerHTML = "Nothing"; 
  } 
  if (window.XMLHttpRequest) {
   xmlhttp = new XMLHttpRequest();
  }else{
   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function(){
   if(4 == xmlhttp.readyState && 200 == xmlhttp.status) {
    document.getElementById("ajax_result").innerHTML = xmlhttp.responseText;
   }
  }

  //xmlhttp.open("GET",true);
  xmlhttp.open("GET","receiveParams.jsp?userinput="+str.value,true);
  xmlhttp.send();

  }
 </script>
</div>
</body>
</html>

效果一致。

JQuery 中的Ajax

前面介绍的是原生的Ajax实现方式，我们需要做的工作还是很多的，而JQuery帮助我们完成了平台无关性的工作，我们只需要专注于业务逻辑的开发即可。直接用jquery的.post或者.get或者.ajax方法，更方便更简单，js代码如下：
 •.POST方式

 $.post("./newProject",{newProjectName:project_name},function(data,status){
  //alert("data:" + data + "status:" + status);
  if(status == "success"){
   var nodes = data.getElementsByTagName("project");
   //alert(nodes[0].getAttribute("name"));
   for(var i = 0;i < nodes.length;i ++){
    $("#project_items").append("<option value=\"" + (i+1) + "\">" + nodes[i].getAttribute("name") + "</option>"); 
   }
  }

 })

 •.ajax方式

 $(function(){
  //按钮单击时执行
  $("#testAjax").click(function(){

    //Ajax调用处理
   $.ajax({
    type: "POST",url: "test.php",data: "name=garfield&age=18",success: function(data){
      $("#myDiv").html('<h2>'+data+'</h2>');
     }
   });

   });
 });

 •.get方式

 $(document).ready(function(){
 $("#bt").click(function(){
 $.get("mytest/demo/antzone.txt",status){
  alert("Data:"+data+"\nStatus:"+status);
 })
 })
})

总结

今天的演示对于实际开发的过程中，服务器端的用户输入数据验证，或者即时更新页面而又减少网络流量是非常的有必要的。而且用处也很广泛,还能有效的提升用户体验。

这次的案例，就当是抛砖引玉，给你的应用也添加上异步加载吧。

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

$.AJAX()方法中的PROCESSDATA参数
$.AJAX()方法中的PROCESSDATA参数 在使用jQuery的$.ajax()方法的时候参数processData默认为true(该方法为jQuery独有的) 默认情况下会将发送的数据序列化以适应默认的内容类型application/x-www-form-urlencoded 如果想发送不
form表单提交的几种方式
form表单提交的几种方式 表单提交方式一：直接利用form表单提交 html页面代码： &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot; /&gt; &lt;title&gt;Ins
AJAX应用之注册用户即时检测
文章浏览阅读1.3k次。AJAX的无刷新机制使得在注册系统中对于注册名称的检测能即时显示。常见的用户注册是用户输入用户名，后台程序检测数据库中用户名是否重复而做出注册的成功与失败之提示（当用户注册重名时将返回重新注册），或者稍微人性化一点就是在用户名文本框后添加一个检测按钮，让用户检测后再做注册。以上操作，对于用户体验方面来说是比较“差劲”的，一个很好的用户体验就是：当用户输入完注册用户名后，Web系统应能即时检查并即时_用户注册 实时异步检测
详谈基于JSON的高级AJAX开发技术
文章浏览阅读1.2k次。 本文将解释如何使用AJAX和JSON分析器在客户端和服务器之间创建复杂的JSON数据传输层。一、 引言毫无疑问，AJAX已经成为当今Web开发中一种强有力的用户交互技术，但是它的许多可能性应用仍然鲜为人知。在本文中，我们将来共同探讨如何 使用JavaScript对象标志(JSON)和JSON分析器在服务器和客户端AJAX引擎之间创建复杂而强有力的JSON数据传输层。我们将_ajax技术可行性
手写的ajax分页控件
文章浏览阅读2.2k次。/************************** 创建XMLHttpRequest对象 **************************/function CreateRequest(){ var xmlObj = null; try { xmlObj = new XMLHttpRequest(); } catch(e) {
AJAX中同时发送多个请求XMLHttpRequest对象处理方法
文章浏览阅读3.7k次。在ajax应用中，通常一个页面要同时发送多个请求，如果只有一个XMLHttpRequest对象，前面的请求还未完成，后面的就会把前面的覆盖 掉，如果每次都创建一个新的XMLHttpRequest对象，也会造成浪费。解决的办法就是创建一个XMLHttpRequset的对象池，如果池里有 空闲的对象，则使用此对象，否则将创建一个新的对象。下面是我最近写的一个简单的类：* XMLHttpReques_xmlhttprequest发送多个请求
Ajax 同一页面同时执行多个 XMLHTTP
文章浏览阅读3.1k次。Ajax 同一页面如何同时执行多个 XMLHTTP 呢，比如博客页，需要同时利用 Ajax 读取作者信息、文章信息、评论信息……我们的第一反应可能是创建多个全局 XMLHTTP 对象，但这并不现实。其实实现方式非常简单，就是给 onreadystatechange 对应的回调函数加上参数，以下代码是解决方案中一个函数中的一段代码。xmlhttp.open("GET", "ajax_proc_ajax响应多个mxl文件
简单介绍数据岛使用方法
文章浏览阅读1.5k次。数据岛指的是存在Html网页中的xml代码段，它在Html中形成了一个数据的集合，数据岛允许我们在Html网页中集成xml，对xml编写脚本.数据岛有它特有的形式，由标记xml开始，在开始标记中要有一个ID属性，用于指定该指定数据岛的名称。 (当然要以/xml结束).元素xml包含的内容就是xml代码。数据岛也分为2种：1）内嵌的数据岛形式2）外嵌的数据岛形式说了那么多废话，还_数据中岛计算模式
AJAX 框架 用 Asp.net ajax 还是 Jquery ?
文章浏览阅读2.1k次。AJAX 流行之后，总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NET AJAX 并不包括在 AJAX 框架之中。刚开始学了 JQuqery， 众多的 $get(),...等等符号早已把我搞晕了。暂时就放弃了。后来学习 ASP.NET AJAX ，在微软的领导下，逐渐由服务器端转向客户端编程。 激起我客户端编程的兴趣，才想起学习一下了 Jquery. 随着WEB2._jquery ajax asp.net 认证
轻便的XMLHttpRequest应用函数：downloadUrl()
文章浏览阅读1.7k次。前段时间在用google map api的函数库的时候，发现里面的downloadUrl函数非常好用，所以自己写了一个。用腻了那些什么框架什么池，到头来发现越简单的东西越是适合我这种懒人。downloadUrl(url, callback, data);参数说明： url不用说了; callback是回调函数，函数调用的时候会有两个参数：data, responseCode，data就_xmlhttprequest downloadurl
利用XMLHTTP无刷新自动实时更新数据
文章浏览阅读956次。前些时间写了几篇关于XMLHTTP运用的实例.(可以到http://dev.csdn.net/user/wanghr100看之前的几编关于XMLHTTP的介绍.)近来看论坛上经常有人提问关于如何无刷新,自动更新数据.传统上,我们浏览网页,如果加入最新的数据.只能是等我们重新向服务器端请求时才能显示出来.但是,对于一些时效性很强的网站.传统的这种做法是不能满足的.我们可以让程序自动刷新.定时_后端xml怎么实现数据有救新增,没有就更新
AJAX设计模式 XMLHttpRequest调用
文章浏览阅读3.3k次。 XMLHttpRequest调用XMLHttpRequest Call ●●●调用，回调，下载，抓取，实时，查询，远程通信（Remoting），远程通信脚本（RemoteScripting），同步，上传，XMLHttpRequest图6-2：XMLHttpRequest调用 目标故事Reta正在一个批发商网站上购买商品。每次她添加一个商品到购物车时，web站点发出_createxmlhttpre
用javascript动态更改DropDownList下拉项
文章浏览阅读1.3k次。function clearitem(){ var drp1 = document.getElementById("drp1"); while(drp1.options.length>0) { drp1.options.remove(0); } }//动态更改方法（根据城市代码取得该市商业区并添加到DropDownList中_dropdownlist根據動態變化
微調一下 Json.net ，讓他可以序列基本型別
文章浏览阅读1.9k次。因為 Json.net 是有附原始碼的，他也附了單元測試的專案，底下是我額外增加的UnitTest，我的目標就是讓底下的測試可以pass，而且原來的Test 也要都能通過。 ValueTypeTest.csusing System;using NUnit.Framework;namespace Newtonsoft.Json.Test { [TestFixture] public cl_vb 無效的 json 基本型別
利用XMLHTTP无刷新获取数据
文章浏览阅读844次。利用XMLHTTP无刷新获取数据. 客户端和服务器端数据的交互有几种方法.1.提交,通过提交到服务器端.也称"有刷新"吧.2.通过XMLHTTP无刷新提交到服务器端,并返回数据.也称"无刷新"吧.利用XMLHTTP我们可以实现很多很强大的应用.这文章主要介绍它的一些简单的应用.附:因为XMLHTTP是IE5.0+支持的对象.所以你必须要有IE5.0+才能看到效果.client.htm_xmlhttp取源码没有更新
.Net 底下，Json 相關套件的限制
文章浏览阅读1.8k次。Json.Net 無法序列基本型別(string, int)，Asp.Net Ajax 無法正確序列日期，AjaxPro序列出我不想要的_type字串 1. Json.Net 是我最常使用的序列/反序列json套件，標榜速度快，對於一對多關係的object 也都能正常運作, 己能滿足我平日的需要，但前幾天突然有個情況，我要序列的是一個泛型參數，該參數不一定是物object型別，有可能是st_token string in state start
编写组件，使用JavaScript更新UpdatePanel (转载)
文章浏览阅读1.3k次。转载自：http://www.cnblogs.com/JeffreyZhao/archive/2007/01/31/update_the_updatepanels_by_js.html众 所周知，UpdatePanel是通过Trigger来更新的。被设定为Trigger的控件在PostBack之后会被客户端所截获，并且使用 XMLHttpRequest对象发送内容，然后服务器端由ScriptMan_web.ui.updatepanel 和 updatepanel 的区别
无刷新网页——数据岛技术应用
文章浏览阅读1.9k次。有些时候，只是需要更新页面的一个部分甚至只是更新中间的几个数据却需要从服务器DOWN整个页面，导致各种资源的浪费。使用数据岛技术可以很好的解决这个问题：通过定时器或用户事件触发数据岛（XML对象）象服务器获取数据，在数据获取完成后，适时更新相关数据。示例HTML部分：http://localhost/WebService/LoadData/FeaturedService.asmx/GetScore_web数据岛
构建pool管理无刷新页面的xmlhttp对象
文章浏览阅读1k次。在页面上使用ActiveXObject的代价是很大的，如果我们的无刷新页面使用xmlhttp技术，我们或许需要频繁的建立xmlhttp对象，当然 我们也可以使用全局变量来cache一个xmlhttp对象实例。但是这样的方法适合于同步方式xmlhttp通信，而对于异步方式xmlhttp通信将 会出现问题。由于没有了进程的堵塞，用户可能再次调用同一个xmlhttp实例，如果这时前一个通信未完成，那么就
Lightbox JS v2.0
文章浏览阅读998次。 by Lokesh Dhakar 译: croc查看原文概要：Lightbox JS 是一个简单而又谦恭的用来把图片覆盖在当前页面上的脚本. 它能被快速安装并且运作于所有流行的浏览器.最新更新 Version 2.0 图片集: 分组相关的图片并且能轻松的导航它们 视觉特效: 奇特的自适应调整 向后兼容: yes! 点击这里查看实例_on lightbox 2 by lokesh dhakar
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot