`

ajax介绍

    博客分类:
  • ajax
 
阅读更多
一、Ajax的概述

   AJAX(Asynchronous Javascript And Xml),综合运用Javascript、XHTML、CSS、DOM、XMLHttpRequest、XML和XSLT等技术来改善B/S结构客户体验效果的方法称为AJAX。
  (Ajax并不是新技术,而是对一些旧技术的重新整合应用而已。)
   传统B/S结构结构图:

Image:Example.jpg

   如图所示,每一个动作都要把请求发送到服务器,再由服务器端返回结果,用户体验效果差。

二、Ajax原理解析

   通过XMLHttpRequest对象异步发送数据请求,并在得到返回结果后自动激发JavaScript方法调用,实现页面无刷新或局部刷新来更新数据信息的目的。
   Ajax原理图:

Image:Example.jpg

  由图可见,Ajax很好的解决了传统B/S结构耗费大量带宽所造成的用户体验差的问题。

三、Ajax涉及技术简介

  Javascript — 属于动态解释型语言,灵活性很高,是Ajax技术的支架,协调各种技术的相互协作,完成良好的用户体验效果。
  DOM — 文档对象模型(Document Object Model)用来表达浏览器中的整个html 文档对象及其层次结构,使用Javascript 可以访问html文档对象中的任何节点元素。
  XML — 具有简单灵活和跨平台的特点,适合异构系统间的通信。使用规范的xml可以提高开发效率,但是由于传递xml时会带有大量的冗余数据,故很多人不愿意使用xml。
  CSS — 层叠样式表单(Cascading Style Sheet )用于美化页面。
  XMLHttpRequest对象 — 由Javascript创建,是整个Ajax开发的基础,具有从服务器端异步发送http请求的能力,大部分浏览器都支持。
  支持XMLHttpRequest对象的主流浏览器:
  Microsoft IE5.0以上
  Apple Safari 1.2以上
  Firefox 1.0以上
  Netscape 7.1以上
  Opera 7.6以上

四、Ajax技术的应用 1、创建跨浏览器的异步对象:

function createXHR(){
   var xhr;
   try{ //IE5.0
   xhr = new ActiveXObject("Msxm12.XMLHTTP");
   }catch(e){
   try{  //IE5.5
   xhr = new ActiveXObject("Microsoft.XMLHTTP");
   }catch(e1){
   xhr = false;
   }
   }
   if(!xhr && typeof XMLHttpRequest != 'undefined'){
   xhr = new XMLHttpRequest();
   }
   return xhr;
}

2、使用open方法创建一个请求:

open(method,url,asynchronous,user,password);
method:http 请求方式,get,post.
url:服务器端程序的url
asynchronous:定义request请求是否异步,true(send函数在发送request后马上返回,即异步请求),false(send必须收到回执后才返回,即同步请求),默认为true
user:有些url要求request带有用户名,一般不会用倒
password:密码,同user。

3、使用send方法发送一个请求:

send(body)
body 为字符串,是发送的内容,如果在open中设置了get请求,则为null。
如果在open中设置了post请求,需要在send提交前设置http头信息。例:
req.open(“post”,“http://localhost:8080/ajaxDemo/checkusername.jsp”);
req.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded”);
req.send(“checkName=zhangsan”);

4、使用onreadystatechange事件捕获请求状态变化:

req.open…
req.onreadystatechange = handleRequest;
req.send…
function handleRequest(){
  if(req.readyState == 4){
    if(req.status == 200){
   …
   }else{
   …
   }
   }
}

readyState的属性: 0 Open方法还未开始调用 1 Open已经调用,但还未调用send方法 2 Send方法已经调用 3 请求已经发送成功,正在接收数据 4 应答已解析,数据接收成功常用status属性: 200 : 请求成功 404 : 请求资料未找到 500 : 内部服务器错误其他见附件—XMLHttpRequest status属性 5、使用responseText获得返回的文本

req.responseText 可以获得由服务器返回来的文本信息。

五、Jquery 中对Ajax的应用(一)Jquery 中的Ajax 请求: 1. load( url, [data], [callback] ) :载入远程 HTML 文件代码并插入至 DOM 中。

  url (String) : 请求的HTML页的URL地址。
  data (Map) : (可选) 发送至服务器的 key/value 数据。
  callback (Callback) : (可选) 请求完成时(不需要是success的)的回调函数。
  这个方法默认使用 GET 方式来传递的,如果[data]参数有传递数据进去,就会自动转换为POST方式的

2. jQuery.get( url, [data], [callback] ):使用GET方式来进行异步请求

  url (String) : 请求的HTML页的URL地址。
  data (Map) : (可选) 发送至服务器的 key/value 数据。
  callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

3. jQuery.post( url, [data], [callback], [type] ) :使用POST方式来进行异步请求

  url (String) : 请求的HTML页的URL地址。
  data (Map) : (可选) 发送至服务器的 key/value 数据。
  callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才会调用该方法)。
  type (String) : (可选)官方的说明是:Type of data to be sent。其实应该为客户端请求的类型(JSON,XML,等等)

4. jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

  url (String) : 请求的HTML页的URL地址。
  url (String) : 待载入 JS 文件地址。
  callback (Function) : (可选) 成功载入后回调函数。
(二)Jquery 中的Ajax 事件:
局部事件
$.ajax({

beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } // ...

});
全局事件
$("#loading").bind("ajaxSend",function(){ $(this).show(); }).bind("ajaxComplete", function(){ $(this).hide(); });
jQuery官方给出的完整的Ajax事件列表:
  ajaxStart (Global Event)

This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.

  beforeSend (Local Event)

This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)

  ajaxSend (Global Event)

This global event is also triggered before the request is run.

  success (Local Event)

This event is only called if the request was successful (no errors from the server, no errors with the data).

  ajaxSuccess (Global Event)

This event is also only called if the request was successful.

  error (Local Event)

This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).

  ajaxError (Global Event)

This global event behaves the same as the local error event.

complete (Local Event)

This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.

ajaxComplete (Global Event)

This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.

ajaxStop (Global Event)

This global event is triggered if there are no more Ajax requests being processed. (三)jQuery里面功能最强的Ajax请求方法 $.ajax();

  function doAjaxSend(ptype,purl,pdatas,pdataType,pcomplete){

var s =""; pdatas.each(function(key,value,index){ s += key+"="+value+"&"; }); s.substring(0,s.length-1); $.ajax({ type: ptype, //get/post; url: purl, data: s, dataType:pdataType, //xml/html/json; complete:doAjaxResponse //后面没有, });

}
function doAjaxResponse(originalRequest){

var objXml=originalRequest.responseText;

}

(四)其他

jQuery.ajaxSetup( options ) : 设置全局 AJAX 默认选项。
serialize() : 序列表表格内容为字符串。
serializeArray() : 序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据结构数据。
分享到:
评论

相关推荐

    prototype的Ajax介绍

    ### Prototype的Ajax介绍 #### 一、Prototype框架与Ajax **Prototype** 是一款JavaScript库,其设计目的是为了简化客户端脚本编程。它提供了一系列高级功能,使得开发人员能够更加高效地构建动态网页应用。其中,*...

    VS2008新特性之AJAX介绍

    **标题:“VS2008新特性之AJAX介绍”** **内容详解:** Visual Studio 2008(简称VS2008)是微软发布的一款强大的开发工具,它在原有的版本基础上引入了许多新特性,其中对于AJAX(Asynchronous JavaScript and ...

    VS2008新特性之AJAX介绍(Code)

    **Visual Studio 2008新特性之AJAX介绍** Visual Studio 2008作为Microsoft推出的强大开发工具,引入了一系列显著的新特性,其中AJAX(Asynchronous JavaScript and XML)支持是开发者广泛关注的一个亮点。AJAX允许...

    vs2008视频教程6:VS2008新特性之AJAX介绍

    本篇内容主要围绕“VS2008视频教程6:VS2008新特性之AJAX介绍”展开,重点讲解了Visual Studio 2008中与AJAX(Asynchronous JavaScript and XML)相关的新特性和应用。AJAX是一种在无需重新加载整个网页的情况下,...

    前端ajax介绍

    简单介绍Ajax

    Visual Studio 2008开发新特性系列课程(6):VS2008新特性之AJAX介绍

    在本课程中,我们将深入探讨"Visual Studio 2008开发新特性系列课程(6):VS2008新特性之AJAX介绍"这一主题。Visual Studio 2008作为微软推出的强大开发工具,引入了一系列针对AJAX(Asynchronous JavaScript and XML...

    11ajax介绍和爬取ajax数据的两种方式.mp4

    11ajax介绍和爬取ajax数据的两种方式.mp4

    Ajax介绍,为什么用ajax

    ### Ajax详解:异步JavaScript与XML的革命 #### 引言 Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这一技术自诞生以来,极大地提升了用户交互体验,...

    Ajax介绍的学习文档

    Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这种技术的出现极大地提升了用户体验,使得网页交互变得更加流畅和实时。在本学习文档中,我们将深入...

    Ajax中文手册 API

    AJAX介绍AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。2. AJAX实例AJAX可以用来创建更多交互式的网络应用程序。3. AJAX源代码简要分析上一章节效果的代码原理4....

    ajax介绍.docx

    ### AJAX 技术详解 #### 一、AJAX 概述 **AJAX** (Asynchronous JavaScript and XML) 是一种用于构建动态网页的应用程序技术,它允许网页在无需重新加载整个页面的情况下,从服务器请求并使用数据。这种技术极大地...

    AJAX介绍(关于AJAX的网站实现)

    AJAX,全称异步JavaScript和XML,是一种用于创建交互式网页应用的开发技术,它结合了一系列技术,如XHTML+CSS的呈现、DOM动态显示和交互、XML和XSLT的数据交换以及XMLHttpRequest的异步数据通信。AJAX的核心在于...

    Ajax介绍以及Ajax的功能范围

    Ajax,全称Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验,尤其是在网页应用中,...

    AJAX介绍

    AJAX(Asynchronous JavaScript and XML)是一种用于创建交互式网页应用的技术,它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。AJAX 的出现极大地提升了用户体验,因为它使得用户能够...

    Ajax介绍

    Ajax,全称Asynchronous JavaScript + XML,是一种用于创建动态网页的技术,它允许在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。这一技术的出现极大地提升了Web应用程序的用户体验,使得用户...

    Ajax 中文手册(快速上手)

    1. AJAX介绍 AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。 2. AJAX实例 AJAX可以用来创建更多交互式的网络应用程序。 3. AJAX源代码 简要分析上一章节效果的...

    ajax简介(PPT)ppt Introduction to AJAX

    ### AJAX:将交互性和直观性带入Web应用 在当今数字化时代,Web应用程序与桌面应用程序并驾齐驱,各自在不同领域展现优势。然而,两者之间的功能与用户体验存在显著差异。桌面应用程序通常安装在本地计算机上,运行...

    Ajax中文手册(快速上手).rar

    1. AJAX介绍 AJAX是一种运用JavaScript和可扩展标记语言(XML),在网络浏览器和服务器之间传送或接受数据的技术。 2. AJAX实例 AJAX可以用来创建更多交互式的网络应用程序。 3. AJAX源代码 简要分析上一章节...

Global site tag (gtag.js) - Google Analytics