AJAX基础应用方式

最新推荐文章于 2025-02-25 16:49:23 发布

原创最新推荐文章于 2025-02-25 16:49:23 发布 · 650 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript

javascript 专栏收录该内容

2 篇文章

订阅专栏

1 AJAX简介

资料来源于W3School

1.1 什么是AJAX

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。AJAX 是一种用于创建快速动态网页的技术。

1.2 XMLHttpRequest（XHR）对象

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

1.2.1 创建XMLHttpRequest对象

在原生JavaScript中创建 XMLHttpRequest 对象的语法：
variable=new XMLHttpRequest();
老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：
variable=new ActiveXObject(“Microsoft.XMLHTTP”);

/*为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：*/
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

1.2.2 XMLHttpRequest 对象方法（向服务器发送请求）

向服务器发送请求
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：
xmlhttp.open(“GET”,”test1.txt”,true);
xmlhttp.send();
这里写图片描述
注：

上面简单的例子可能得到缓存的结果。为避免这种情况，可向URL添加一个唯一的ID。
xmlhttp.open(“GET”,”demo_get.asp?t=” + Math.random(),true);
xmlhttp.send();
可通过GET方法发送信息，向URL添加信息：
xmlhttp.open(“GET”,”demo_get2.asp?fname=Bill&lname=Gates“,true);
xmlhttp.send();
如果需要像 HTML 表单那样 POST 数据，请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据：
xmlhttp.open(“POST”,”ajax_test.asp”,true);
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
xmlhttp.send(“fname=Bill&lname=Gates”);

1.2.3 异步 - True 或 False

AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 对象如果要用于 AJAX 的话，其 open() 方法的 async 参数必须设置为 true：

当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

当使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

1.2.4 XMLHttpRequest对象属性（服务器响应）

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

属性	描述
responseText	获得字符串形式的响应数据。
responseXML	获得 XML 形式的响应数据。

responseText 属性返回字符串形式的响应，因此您可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

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

1.2.5 onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。
每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
下面是 XMLHttpRequest 对象的三个重要的属性：
这里写图片描述

注:
onreadystatechange 事件被触发 5 次（0 - 4），对应着 readyState 的每个变化。

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

注：使用 Callback 函数
callback 函数是一种以参数形式传递给另一个函数的函数。
如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

/*即将多个AJAX任务能够复用的代码封装到自定义函数loadXMLDoc中*/
function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

2 服务器端获取及返回数据方式

2.1 ASP和PHP服务器

2.1.1 ASP服务器处理数据方式

获得来自 URL 的 q 参数：
q=ucase(request.querystring(“q”))
返回数据：
response.write(xxx);

2.1.2 PHP服务器处理数据方式

获得来自 URL 的 q 参数：
$q=$ _GET[“q”];
返回数据：
$response=$ xxx;
echo $response

2.2 JAVA服务器

2.2.1 Servlet方式

步骤1：在web.xml中添加servlet标签

 <servlet>
  <servlet-name>RegistServlet</servlet-name>
  <servlet-class>web.RegistServlet</servlet-class>
 </servlet>
 <servlet-mapping>
  <servlet-name>RegistServlet</servlet-name>
  <url-pattern>/getAJAX</url-pattern>
 </servlet-mapping>

步骤2：创建对应Servlet类web.RegistServlet，继承HttpServlet，并overwrite父类的service方法或doGet和doPost方法。
步骤3：通过上步方法的HttpServletRequest参数对象获取数据，通过HttpServletResponse对象返回数据。
返回数据需要用到PrintWriter对象：

//如果中文乱码需要设置字符编码
response.setCharacterEncoding("UTF-8");
PrintWriter out = response.getWriter();
out.print(xxx);

ps:
jsp通过内置的request和response对象获取和返回数据。

2.2.2 Struts2方式

步骤1：在web项目中加入Struts2框架。
步骤2：在struts.xml中创建actiong关联自定义Action类。
步骤3：自定义Action类继承ActionSupport类
步骤4：

可以在自定义Action执行的方法中通过ServletActionContext.getRequest()和getResponse()方法获得HttpServletRequest和HttpServletResponse对象。
也可以在自定义Action类中添加与传入数据变量名一致的变量，并生成setter方法，Struts会自动匹配并赋值。
步骤5：传数据到客户端方法与Servlet方式一样。

3 JQuery实现AJAX

3.1 $.ajax();

最简单的情况下，$.ajax()可以不带任何参数直接使用。

注意，所有的选项都可以通过$.ajaxSetup()函数来全局设置。

如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。
回调函数均有多个参数可选。

beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
dataFilter 在请求成功之后调用。传入返回的数据以及”dataType”参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
complete当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串。

样例：

$.ajax({
    url:"",
    //data选项既可以包含一个查询字符串，比如 key1=value1&amp;key2=value2 ，也可以是一个映射，比如 {key1: 'value1', key2: 'value2'} 。
    data:{
        "name1":"value1",
        "name2":"value2"
    },
    //服务端返回的数据类型,除了单纯的XML，还可以指定 html、json、jsonp、script或者text。
    dataType:"json",
    //type默认是"GET",请求方式有"POST"、"GET"
    type:"GET",
    beforeSend:function(XMLHttpRequest){
    },
    dataFilter:function(data, dataType){
    },
    success:function(data[,textStatus，jqXHR]){
    },
    error:function(XMLHttpRequest, textStatus, errorThrown){
    }
    complete:function (XMLHttpRequest, textStatus){
    },
});

3.2 load(url, [data], [callback])

概述
载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。

参数

url:待装入 HTML 网页网址。
data:发送至服务器的 key/value 数据。在jQuery 1.3中也可以接受一个字符串了。
callback:载入成功时回调函数。

样例

$("#links").load("/Main_Page #p-Getting-Started li");
$("#feeds").load("feeds.html");
 $("#feeds").load("feeds.php", {limit: 25}, function(){
   alert("The last 25 entries in the feed have been loaded");
 });

3.3 其他简化$.ajax()的方法

$.get(url, [data], [callback], [datatype])
$.getJSON(url, [data], [callback])、$.getScript(url, [callback])
$.post(url, [data], [callback], [datatype])
ajaxComplete(callback)、ajaxError(callback)、ajaxSend(callback)、ajaxStart(callback)、ajaxStop(callback)、ajaxSuccess(callback)
$.ajaxSetup([options])//设置全局 AJAX 默认选项。