`

ajax基础

    博客分类:
  • ajax
阅读更多

Ajax ( asynchronousjavascript and xml )

  •   ajax不是一项具体的技术,而是Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest等多门技术的综合应用。    
  •   作用:可以在用户浏览网页的同时与服务器进行异步交互和实现网页内容的局部更新。
  •   核心:程序不通过浏览器发出请求,而是调用javascript中的类XMLHttpRequest对象来发送请求,再由这个JavaScript对象接收响应,并将响应结果用DOM编程方式挂到原来的网页上。

          a. 浏览器的普通交互方式:

         

             b. Ajax的交互方式

            

               同步与异步:

               (1)  同步:是指发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。

                      流程:提交请求->等待服务器处理->处理完毕返回(这个期间客户端浏览器不能干任何事)

               (2)  异步:是指发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。 

                      流程:请求通过事件触发->服务器处理(这时浏览器仍然可以作其他事情)->处理完毕

     Ajax框架的基本流程:

  •   XMLHttpRequest对象初始化
  •   指定响应处理函数
  •   发送Http请求
  •   处理服务器返回的信息

         1.  初始化XMLHttpRequest对象

               XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的,非W3C标准.,所以XMLHttpRequest在不同浏览器上的实现方法不统一,但在不同浏览器上的实现是兼容的。

                XMLHttpRequest对象属性:

                (1)  onreadychange: 通信状态改变的事件触发器,每次readyState属性的改变都会触发 readystatechange事件。

                (2)  readyState:通信状态,值为数值。 readyState 值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4 。

reayState值:
      a.   0  --  未初始化 ( open 方法还没有被调用)                          
      b.   1  --  正在加载 ( send 方法还没有被调用 )
      c.    2  --  已加载完毕 ( 请求已经开始 )
      d.    3  --  交互中 ( 服务器正在发送响应 )  
      e.    4  --  完成 ( 响应发送完毕 )    
 
              

                 (3)  status: 服务器返回的状态码。

                                      常用状态码及其含义:

                                         a.   404  --  没找到页面(not found)
                                         b.   403   --  禁止访问(forbidden)
                                         c.   500  --  内部服务器出错(internal service error)
                                         d.   200  --  一切正常(ok)
                                         e.   304   --  没有被修改(not modified)(服务器返回304状态,表示源文件没有被修改 )

                 (4)  responseText: 从服务器发送的响应数据

                        注意: 只有当 readyState 属性值变成 4 时, responseText 属性才可用,表明 Ajax 请求已经结束。

                 (5)  responseXML: 如果服务器返回的是 XML, 那么数据将储存在 responseXML 属性中。

                        注意: 只用服务器发送了带有正确首部信息的数据时, responseXML 属性才是可用的。所以,修改 MIME 类型为 text/xml  (即contentType="text/xml")

                 (6)  statusText:服务器返回的状态文本信息

                  XMLHttpRequest对象方法:

                   (1)  abort();  --  停止当前请求 

                   (2)  getAllResponseHeaders() ;  --  把http请求的所有响应首部作为键/值对返回

                   (3)  getResponseHeader("headerLabel") ;  --  返回指定首部的串值

                   (4)  open(“method”,”uri”,asynch);  --  建立对服务器的调用

                          第一个参数:HTTP请求方式。可以是GET或POST(按照HTTP规范,该参数要大写 )。

                          第二个参数:请求页面的URL,可以是相对URL或绝对URL。

                          第三个参数:设置请求是否为异步模式,默认值为true(异步模式)。

                          注意:a .若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符)。若需要向服务器发送数据,用POST。

                                      b . 如果以POST方式请求,必须先调用setRequestHeader方法,修改MIME类别。    eg:xhr.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

                    (5)  send(data);  --  向服务器发送请求。若采用的GET请求方式,send(null)就可以了(即使send非空值,服务器也接收不到)。

                    (6)  setRequestHeader("head", "value") ;  --  设置指定首部数值。首部信息是一系列描述请求的元数据(metadata),首部信息用来声明一个请求是 GET 还是 POST方式。

                            第一个参数:首部的名字。

                            第二个参数:首部的值。

                            eg:  // 声明POST请求

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

                  XMLHttpRequest对象初始化代码:               

  1. Function createXmlHttpRequest(){  
  2.      var  xmlhttp  =  null ;  
  3.      try{  
  4.           //Firefox, Opera 8.0+, Safari直接new创建XMLHttpRequest对象  
  5.             xmlhttp = new  XMLHttpRequest();  
  6.          }catch(e){  
  7.           //IE7.0以下的浏览器以ActiveX组件的方式来创建XMLHttpRequest对象  
  8.            var  MSXML  =  
  9.                        ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',  
  10.                         'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',  
  11.                         'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];  
  12.            for(var  n  =  0 ; n  <   MSXML.length ; n ++){  
  13.                try{  
  14.                     xmlhttp  =  new  ActiveXObject(MSXML[n]);  
  15.                    break;  
  16.                }catch(e){}  
  17.            }  
  18.       }  
  19.       return xmlhttp;  
  20.  }   
             2.  指定响应处理函数

                        指定当服务器返回信息时客户端的处理方式.

                        (1)  首先,它要检查XMLHttpRequest对象的readyState值,判断目前的通信状态。
                               if (http_request.readyState == 4) {
                                      // 信息已经返回,可以开始处理
                                } else {
                                      // 信息还没有返回,等待
                                }

                         (2)  其次,还需要判断返回的HTTP状态码,确定返回的页面没有错误。

                                 if (http_request.status == 200) {
                                      // 页面正常,可以开始处理信息
                                  } else {
                                     // 页面有问题
                                  }

                        eg:      var xhr = createXmlHttpRequest();   //XmlHttpRequest 初始化

                             xhr.onreadystatechange = function(){
                              if(xhr.readyState == 4) {
                                      if(xhr.status == 200 )|| xhr.status == 304){
                                             alert(xhr.responseText);
                                        }
                                }
                            }

               3.  发出HTTP请求

                        这一步调用XMLHttpRequest对象的open和send方法。

                         eg:   //GET请求方式

                            xhr.open('GET', 'checkUser.jsp?username='+name, true);
                            xhr.send(null)

                                   //POST请求方式

                             xhr.open("post","checkUser.jsp“,true);
                             xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
                             xhr.send(name="+name+"&password=ppp");

                          注意:xhr.setRequestHeader()要放在open()和send()之间

                4.  服务器 处理信息

                        eg:  // jsp中处理

                   <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
                       <%
                            String username = request.getParameter("username");
                             if("admin".equals(username)){
                                   out.print("用户名已存在");
                              }
                              else
                               {
                                     out.print("用户名可以使用");
                                }
                        %>
                         // Servlet中处理

                      protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
                                    // TODO Auto-generated method stub
                              String username = request.getParameter("username");
                              
response.setCharacterEncoding("UTF-8");
                               if("admin".equals(username)){
                                     
response.getWriter().print("用户名已存在");
                                }
                                else
                                 {
                                      
response.getWriter().print("用户名可以使用");
                                  }
                         }

分享到:
评论

相关推荐

    ajax 基础

    以下是对Ajax基础知识的详细阐述: 1. **工作原理** - Ajax 的核心是 XMLHttpRequest 对象,它允许JavaScript在后台与服务器通信,而不会打断用户的交互。 - 一个典型的Ajax流程包括创建XMLHttpRequest对象、打开...

    精通Ajax 基础概念.核心技术与典型案例

    ## **一、Ajax基础概念** 1. **异步通信**:Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器进行通信,不阻塞用户对页面的操作。 2. **局部刷新**:Ajax可以只更新网页的部分区域,而不是整个页面...

    csdn 图书 Ajax基础教程.chm

    《Ajax基础教程.chm》 Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的...

    AJAX基础教程.pdf

    ### AJAX基础教程知识点总结 #### 一、AJAX概述 - **定义**:Asynchronous JavaScript and XML(异步JavaScript和XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 - **目的**:提高Web应用的...

    ajax 基础教程源代码

    ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...

    Ajax基础入门简介

    **Ajax基础入门简介** Ajax(Asynchronous JavaScript and XML)是一种用于创建快速、动态网页的技术,它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。这一技术的出现极大地提升...

    Ajax 基础教程中文版.pdf

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。...通过阅读"Ajax基础教程中文版",你可以深入了解Ajax的工作原理,学会如何在实践中运用它。

    AJAX基础教程

    **AJAX基础教程** 在Web开发领域,AJAX(Asynchronous JavaScript and XML)是一种不可或缺的技术,它使得网页可以在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容。本教程将带您深入理解AJAX的基本...

    ajax 基础教程

    ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...

    Ajax基础教程(扫描版)

    原书名:Foundations of Ajax 原出版社: Apress 作者: (美)Ryan Asleson,Nathaniel T.Schutta 译者: 金灵 等 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:7115144818 上架时间:2006-2-14 ...

    Ajax基础教程(亚马逊计算机榜首图书,国内第1本Ajax图书) [第一部分 共两部分]

    本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和...

    ajax基础教程(pdf)(三)

    ajax基础教程(pdf)完整版本,希望对大家有所帮助

    14ajax课程_AJAX基础_

    **AJAX基础详解** 在现代Web开发中,AJAX(Asynchronous JavaScript and XML)是一种核心技术,它使得网页能够实现异步数据交换,无需刷新整个页面即可更新部分内容。本教程将深入探讨AJAX的基础知识,帮助你理解其...

    Ajax基础教程

    **Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这种技术在现代Web开发中被广泛应用,极大地提升了用户体验,因为它允许页面在后台与服务器...

    Ajax基础教程中文版及源代码 part1

    堪称经典由于比较大,压缩成5个压缩卷,大家可以搜索下载,然后解压第一个卷,其它的就会自动解压 文件名分别是 Ajax基础教程中文版及源代码 part1 Ajax基础教程中文版及源代码 part2 Ajax基础教程中文...

    Ajax基础实例讲解

    在Ajax的基础实例中,通常包括以下几个关键步骤: 1. **创建XMLHttpRequest对象**:这是Ajax的核心,它是浏览器提供的一个内置对象,用于在后台与服务器通信。在JavaScript中,我们可以通过`new XMLHttpRequest()`...

    AJAX基础教程-5 Ajax Validate

    **标题:“AJAX基础教程-5 Ajax Validate”** 在学习Web开发时,AJAX(Asynchronous JavaScript and XML)技术是一个重要的组成部分,它允许我们在不刷新整个页面的情况下与服务器进行交互,提升用户体验。本教程...

    ajax基础教程和ajax从入门到精通

    **Ajax基础教程** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验,使得用户在...

    ajax基础教程003

    尽管提供的部分内容并未包含实际的教程信息,但从标题“ajax基础教程003”及描述“ajax基础教程003”来看,这里将围绕Ajax的基础知识进行展开。 ### Ajax基础知识 #### 1. 什么是Ajax? Ajax(Asynchronous ...

Global site tag (gtag.js) - Google Analytics