从Hello World开始深入Ajax

最新推荐文章于 2021-08-06 04:13:26 发布
最新推荐文章于 2021-08-06 04:13:26 发布
阅读量83 收藏
点赞数
文章标签： Ajax Microsoft 应用服务器 JSP 浏览器

1.       初始化XMLHttpRequest对象

  1. var xmlHttp;   
  2. function createXMLHttpRequest(){   
  3. document.getElementById("myid_02").width=100;   
  4. if(window.ActiveXObject){   
  5.         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
  6.         alert("Microsoft.XMLHTTP");   
  7. }else if(window.XMLHttpRequest){   
  8.         xmlHttp=new XMLHttpRequest();   
  9.         alert("Http Request");   
  10. }   
  11. }  

通过这一步，我们可以得到浏览器的支持方式，这里我的浏览器是Microsoft.XMLHTTP方式（IE6），事实上在IE7之前的版本中，浏览器都是采用"Microsoft.XMLHTTP方式，只有在IE7中，才会使用Http Request方式。因此在以下的说明中，我都将以我的浏览器版本为依据进行阐述。
2.        向服务器端发出请求

js 代码
  1. function startRequest(){   
  2.     createXMLHttpRequest();   
  3.    xmlHttp.onreadystatechange=handleStateChange;   
  4.    xmlHttp.open("GET","calculator.jsp",true);   
  5.    xmlHttp.send(null);   


         在AJAX中，许多使用XMLHttpRequest的请求都是从一个HTML事件（例如一个调用JavaScript函数的按钮点击(onclick)或一个按键(onkeypress)）中被初始化的。AJAX支持包括表单校验在内的各种应用程序。有时，在填充表单的其它内容之前要求校验一个唯一的表单域。但是目前我们最好还是简单一点的好^^。首先说明一下XMLHttpRequest对象的属性onreadystatechange。这个属性能辨识readyState 属性的改变，无论readyState值何时发生改变，XMLHttpRequest对象都会激发一个readystatechange事件。其中，onreadystatechange属性接收一个EventListener值，该值向该方法指示无论readyState值何时发生改变，该对象都将激活。
 
　表格1.XMLHttpRequest对象的ReadyState属性值列表。
取值 描述
0  描述一种"未初始化"状态；此时，已经创建一个XMLHttpRequest对象，但是还没有初始化。
1  描述一种"发送"状态；此时，代码已经调用了XMLHttpRequest open()方法并且XMLHttpRequest已经准备好把一个请求发送到服务器。
2  描述一种"发送"状态；此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应。
3  描述一种"正在接收"状态；此时，已经接收到HTTP响应头部信息，但是消息体部分还没有完全接收结束。
4  描述一种"已加载"状态；此时，响应已经被完全接收。

 
 
如果你是一个细心的读者你就会发现这里似乎还要在增加一个JSP页面来处理我们发出的请求信息。为此，我们在这里我们对calculator.jsp进行定义,页面全部内容如下：

--------------------------------------------------------------------------------

Hello World

--------------------------------------------------------------------------------

是不是相当简单！
 
3.       接收请求信息
       在startRequest函数中，我们声明了要使用handleStateChange对象来标识readyState。通过令xmlHttp.onreadystatechange=handleStateChange，我们就成功注册了一个事件处理器。下面就需要对handleStateChange进行具体的是实现，代码如下：

  1. function handleStateChange(){   
  2.   if(xmlHttp.readyState==4){   
  3.          if(xmlHttp.status==200){   
  4.                         document.forms[0].val.value=xmlHttp.responseText;   
  5.          }   
  6.   }   
  7. }  

当readyState值为0、1或2时，responseText包含一个空字符串。当readyState值为3(正在接收)时，响应中包含客户端还未完成的响应信息。当readyState为4(已加载)时，该responseText包含完整的响应信息。因此，我们一直等到readyState为4才开始将结果返回。
 
4.       第一个Ajax页面全貌(赶紧执行一把吧)
事实上，一个完整的打开服务器链接的通讯方法的定义约定格式如下：
xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword)
其中：
    bstrMethod: 连接方式，可用的有GET, POST, PUT, or PROPFIND
    bstrUrl: 服务器的url
    varAsync（可选）: 调用是否异步，默认为true（调用立即返回）
    bstrUser（可选）：用户名，如果url需要验证时附上
    bstrPassword（可选）：密码，如果url需要验证时附上
但是通常情况下我们只需要提供前3个参数就足够了。
 
修改handleStateChange方法，修改后的结果如下：

xml 代码
  1. <%@ page contentType="text/html; charset=GBK" %>  
  2. <html>  
  3. <head>  
  4. <title>test</title>  
  5. <script language="javascript">  
  6.     var xmlHttp;   
  7.     function createXMLHttpRequest(){   
  8.         if(window.ActiveXObject){   
  9.             xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");   
  10.             //alert("Microsoft.XMLHTTP");   
  11.             str=document.getElementById("mydiv_01").innerText;   
  12.             document.getElementById("mydiv_01").innerText="【运算结束】";   
  13.         }else if(window.XMLHttpRequest){   
  14.             xmlHttp=new XMLHttpRequest();   
  15.             //alert("Http Request");   
  16.         }   
  17.     }   
  18.     function startRequest(){   
  19.         createXMLHttpRequest();   
  20.         xmlHttp.onreadystatechange=handleStateChange;   
  21.         xmlHttp.open("GET","calculator.jsp",true);   
  22.         xmlHttp.send(null);   
  23.     }   
  24.     function handleStateChange(){   
  25.         if(xmlHttp.readyState==4){   
  26.             if(xmlHttp.status==200){   
  27.                 document.getElementById("mydiv_01").innerText=xmlHttp.responseText;   
  28.             }   
  29.         }   
  30.     }   
  31. </script>  
  32. </head>  
  33. <BODY>  
  34. <font size="+6">First Samples for Ajax</font><br>  
  35. <input type="button" name="subButton" value="获取数据" onclick="startRequest();">  
  36. <center><div id="mydiv_01">【等待触发】</div></center>  
  37. </BODY>  

 
5.       用Ajax实现与服务器的交互
修改index页面，在其中增加以下HTML代码：

xml 代码

 

  1. <center>  
  2.     <form>  
  3.         <input type="text" name="val_01" size="10" value="5">*   
  4.         <input type="text" name="val_02" size="10" value="8">=   
  5.         <input type="text" name="val_03" size="10" value="0">  
  6.     </form>  
  7. </center>  

 
修改startRequest方法，修改后结果如下：

js 代码
  1. function startRequest(){   
  2.     createXMLHttpRequest();   
  3.     xmlHttp.onreadystatechange=handleStateChange;   
  4.     var val_01=document.forms[0].val_01.value;   
  5.     var val_02=document.forms[0].val_02.value;   
  6.     xmlHttp.open("GET","calculator.jsp?val_01="+val_01+"&val_02="+val_02,true);   
  7.     xmlHttp.send(null);   
  8. }  


js 代码
  1. function handleStateChange(){   
  2.     if(xmlHttp.readyState==4){   
  3.         if(xmlHttp.status==200){   
  4.             document.getElementById("mydiv_01").innerText=xmlHttp.responseText;   
  5.             document.forms[0].val_03.value=xmlHttp.responseText;   
  6.         }   
  7.     }   
  8. }  

 
最后，运行查看结果。

js 代码

js 代码
甘谷天蚕网络技术有限公司
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Ajax的HelloWorld1
08-08
在这个"HelloWorld1"的例子中，我们将深入理解Ajax的基本工作流程以及涉及到的关键概念。 首先，我们需要监听窗口的`load`事件，当页面加载完成后，执行指定的函数。在这个函数中，我们获取页面上的第一个`<a>`标签...
ajax第一个helloworld
03-20
【标题】"Ajax 第一个 HelloWorld" 是初学者进入异步JavaScript和XML（Asynchronous JavaScript and XML）技术领域的起点。Ajax是一种在无需刷新整个网页的情况下，能够更新部分网页的技术，极大地提升了用户体验。...
结合丰富示例深入讲解Ajax架构和最佳实践——《深入Ajax：架构与最佳实践》
图灵教育
07-21 736
媒体评论“本书不仅介绍了编程技术，而且全面讲解了Ajax应用程序的生命周期。如果你想成为一名专业的前端开发人员，一定会被本书中关于架构的真知灼见和最佳实践深深打动。”——AndiGutmans ，PHP创始人暨Zend技术公司CTO “本书循序渐进地讲述技术背后的最佳设计和实践，包括很多好的模式和实践。”           
Ajax深入学习笔记
VivianHope的专栏
06-03 2797
最近在学习ajax，下面整理了一下学习的内容，以便巩固用。 先来看看为什么要用ajax，也就是同步和异步是什么：同步和异步同步的意思就是客户端提交表单，发起请求后需要一直等待服务器端的响应，收到服务器端的响应后需要重新载入页面。 而有了ajax，则可进行异步交互，比如不会提交整个表单后等待服务器响应再刷新页面，而是填写的过程中，通过ajax的机制，就可以把已经填写的部分提交给服务器，服务器进行
ajax深入
qq_26704959的博客
03-07 208
一、原理同步：在进行一个操作之前必须要等到上一个操作返回操作结果才能进行这个操作；异步：不受上一个操作的影响，异步是面向字符的传输，同步是面向帧，接收方和发送方的时钟保持一致。局部表单提交，刷新局部就可以了。缺点是浏览器上的后退和前进按钮失效。用户和服务器之间加一个中间层，用户和服务器响应异步化。并不是所有用户请求都要提交给服务器，像一些数据验证和数据处理等都交给Ajax引擎自己来做，只有确定...
深入了解AJAX
宇宙南海的笔记
05-26 282
转载请注明链接、原作者。AJAX允许浏览器在无需刷新的情况下，异步的更新界面。1、AJAX的特点(1) 无刷新的更新数据(2) 与服务器进行异步通信(3) 破坏了浏览器机制在无刷新更新页面数据的情况下，用户无法返回上一个页面状态，因为浏览器仅能记忆历史记录中的静态页面。(4) 安全问题伪造AJAX请求的方式引发了一定的安全问题，不要认为每个请求都是真实合理的，例如用户可以自行发送AJAX请求到服务...
深入理解ajax
gao__xue的博客
06-20 301
       最近看的前端的内容比较多，今天来和大家分享一下ajax的相关知识吧~         首先介绍一下ajax到底是什么， 它是Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）的英文缩写。ajax 不是新的编程语言，而是一种使用现有标准的新方法。ajax最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内...
hello_helloworld_htmljavascript_javascript_
10-03
标题中的"hello_helloworld_htmljavascript_javascript_"似乎是一种组合关键词的方式，它可能代表着一个初学者入门编程时常常遇到的“Hello, World!”程序，这里特别提到了HTML、JavaScript和CSS这三个关键技术。...
用ajax xml的数据读取的HelloWorld程序
10-30
我们经常会使用JavaScript实现动态的改变div里面的内容，尤其是使用ajax的时候，尤为重要。
jsf 入门 helloWorld
08-02
**JSF（JavaServer Faces）入门 HelloWorld 指南** JavaServer Faces (JSF) 是一个用于构建用户界面的 JavaEE 核心技术，它提供了一种声明式的方式来创建 Web 应用程序的用户界面。JSF 提供了一个组件模型，使得...
深入解析Ajax
什么最重要？算法！！
08-27 3202
博客核心内容：Ajax1、Cookie是什么 2、Session是什么 3、Ajax是什么1、Cookie:在浏览器上面保存的键值对. 应用：用户登录 、投票 代码：from django.shortcuts import render,redirect,HttpResponse from app import models# Create your views here. def ck(
深入Ajax技术
CodingLJ
11-21 143
1.Ajax简介 Ajax是一种JavaScript和XML在浏览器和服务器之间进行异步传输数据的技术。Ajax技术运用于浏览器中，使得服务器索取部分信息，用户不必为整个页面的刷新而等待，实现刷新网页局部内容的功能。 Ajax优点：异步请求；局部刷新；减轻服务器的压力，增强用户的体验。 2.Ajax工作原理 Ajax整合了几种现有的技术：JavaScirpt、XML、CSS、DOM。Ajax技术基于CSS标准化呈现，使用DOM进行动态的显示和交互，XML进行数据的...
深入理解ajax,深入理解ajax
weixin_39897070的博客
08-06 182
常用 for in循环 for(var x in json)var json = JSON.parse(str); //把字符串解析成 JSON对象var json = eval("(" + str + ")"); //把括号内字符当代码运行var str1 = JSON.stringify(json); //将JSON转换成字符串JSON.parse/eval(...
深入解析Ajax——系列（一）
laijieyao的专栏
10-24 2605
AJAX深入解析
ajax
zgsjybzbjdkx的专栏
09-19 177
在搞清楚了XMLHttpRequest的这些基本属性方法以后，我们就可以开始编写我们的第一个Ajax程序了。我们准备通过点击一个按钮然后通过Ajax的方式到服务端取回一个Hello world!的字符串显示在界面的一个文本框里。 我们在一个配置好的站点工程里面新建一个名为Aja
Ajax入门实例----HelloWorld附源码详细注释
xn4545945
08-20 3232
Ajax是什么? Asynchronous Javascript And Xml. 异步的Javascript和Xml。 Ajax是一种在网络应用中实现异步通讯和数据交换的技术。 Ajax并没有新的技术，只是老技术的整合，包括Javascript，XHTML，CSS，XML，DOM，XSLT和XMLHttpRequest等，使其实现更多的功能。 Ajax能干什么？ 1. 无更
Hello! Ajax!
林信良（良葛格）的专栏
02-18 8824
來撰寫您第一個Ajax程式，使用非同步的方式向伺服端取得文字檔案，並加以顯示，首先請準備一個HTML網頁： HelloAjaxEx-1.html Hello! Ajax! Examples... 這個HTML網頁會取得JavaScript檔案，而按下按鈕後，會執行startRequest()函式，JavaScript檔案如下所示： HelloAja
AJAX:如何编写一个关于AJAX的Hello World?(ajax发送异步请求（四步操作）)
04-24 2358
用到的一个Servlet类： package cn.edu.web.servlet; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; impor
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值