AJAX

最新推荐文章于 2025-03-16 10:00:00 发布

原创最新推荐文章于 2025-03-16 10:00:00 发布 · 673 阅读

CC 4.0 BY-SA版权

1.ajax的概述

AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。

2.ajax开发步骤

1、客户端事件发生，调用JavaScript函数编写的事件处理程序；

2、在事件处理程序中创建XMLHttpRequest对象；

3、配置XMLHttpRequest对象；

4、XMLHttpRequest对象发送一个异步http请求到服务器；

5、服务器程序接收请求，处理请求，返回响应；

6、XMLHttpRequest对象调用callback（）函数并处理结果；

7、更新html。

初始化XMLHttpRequest对象

 1 function   createXHR(){
 2    var xhr;
 3    try{    //Firefox, Opera, Safari，。。。
 4            xhr=new XMLHttpRequest();
 5     }catch (e){
 6                  try{//IE
 7                       xhr=new ActiveXObject("Microsoft.XMLHTTP");
 8                  }catch (e){}  
 9                  }
10     }
11    return xhr;
12  }

发出HTTP请求

向服务器发出HTTP请求了。这一步调用XMLHttpRequest对象的open和send方法。

http_request.open('GET', 'http://www.example.org/some.file', true);

http_request.send(null)

按照顺序，open调用完毕之后要调用send方法。send的参数如果是以Post方式发出的话，可以是任何想传给服务器的内容。

注意 : 如果要传文件或者 Post 内容给服务器，必须先调用 setRequestHeader 方法，修改 MIME 类别。如下：

http_request.setRequestHeader ( “ Content- Type ” , ” application /x-www-form- urlencoded ” );

这时资料则以查询字符串的形式列出，作为send的参数，例如：

name=value&anothername=othervalue&so=on

处理服务器返回的信息

处理响应处理函数都应该做什么。

 1 首先，它要检查XMLHttpRequest对象的readyState值，判断请求目前的状态。参照前文的属性表可以知道，readyState值为4的时候，代表服务器已经传回所有的信息，可以开始处理信息并更新页面内容了。如下：
 2 if (http_request.readyState == 4) {
 3     // 信息已经返回，可以开始处理
 4 } else {
 5     // 信息还没有返回，等待
 6 }
 7 　　服务器返回信息后，还需要判断返回的HTTP状态码，确定返回的页面没有错误。所有的状态码都可以在W3C的官方网站上查到。其中，200代表页面正常。
 8 if (http_request.status == 200) {
 9       // 页面正常，可以开始处理信息
10 } else {
11     // 页面有问题
12 }

动态显示信息

XMLHttpRequest对成功返回的信息有两种处理方式：

responseText：将传回的信息当字符串使用；

responseXML：将传回的信息当XML文档使用，可以用DOM处理。

数据格式提要

在服务器端 AJAX 是一门与语言无关的技术。在业务逻辑层使用何种服务器端语言都可以。

从服务器端接收数据的时候，那些数据必须以浏览器能够理解的格式来发送。服务器端的编程语言只能以如下 3 种格式返回数据：

•HTML

•XML

•JSON

3.jQuery AJAX

 $.ajax，这个是JQuery对ajax封装的最基础步，通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。但是它的参数较多，有的时候可能会麻烦一些。看一下常用的参数：

 var configObj = {

       method   //数据的提交方式：get和post

       url   //数据的提交路劲

       async   //是否支持异步刷新，默认是true

       data    //需要提交的数据

       dataType   //服务器返回数据的类型，例如xml,String,Json等

       success    //请求成功后的回调函数

       error   //请求失败后的回调函数

$.ajax(configObj);//通过$.ajax函数进行调用。