`
JavaCrazyer
  • 浏览: 3012228 次
  • 性别: Icon_minigender_1
  • 来自: 河南
社区版块
存档分类

AJAX基础学习(6)——AJAX 请求服务器

阅读更多

 

AJAX - 向服务器发送一个请求

 

要想把请求发送到服务器,我们就需要使用 open() 方法和 send() 方法。

 

open() 方法需要三个参数。第一个参数定义发送请求所使用的方法(GET 还是 POST)。第二个参数规定服务器端脚本的 URL。第三个参数规定应当对请求进行异步地处理。

 

send() 方法可将请求送往服务器。如果我们假设 HTML 文件和 ASP 文件位于相同的目录,那么代码是这样的:

 

xmlHttp.open("GET","time.asp",true);
xmlHttp.send(null);

 现在,我们必须决定何时执行 AJAX 函数。当用户在用户名文本框中键入某些内容时,我们会令函数“在幕后”执行。

 

<html>
<body>

<script type="text/javascript">

function ajaxFunction()
 {
 var xmlHttp;
 
 try
    {
   // Firefox, Opera 8.0+, Safari
    xmlHttp=new XMLHttpRequest();
    }
 catch (e)
    {

  // Internet Explorer
   try
      {
      xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
      }
   catch (e)
      {

      try
         {
         xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
         }
      catch (e)
         {
         alert("您的浏览器不支持AJAX!");
         return false;
         }
      }
    }
	
    xmlHttp.onreadystatechange=function()
      {
      if(xmlHttp.readyState==4)
        {
         document.myForm.time.value=xmlHttp.responseText;
        }
      }
    xmlHttp.open("GET","time.asp",true);
    xmlHttp.send(null);
	
 }
</script>

<form name="myForm">
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>

</body>
</html>

 下一节介绍 "time.jsp" 的脚本,这样我们完整的 AJAX 应用程序就搞定了。

分享到:
评论

相关推荐

    学习ajax的文档——ajax基础文档

    **Ajax(Asynchronous JavaScript and XML)**是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。这个技术由JavaScript实现,通常与...通过不断实践和深入学习,你将能够运用Ajax创造出更多优秀的Web项目。

    AJAX入门学习——ajax4jsf

    ### AJAX入门学习——ajax4jsf #### 一、引言 AJAX(Asynchronous JavaScript and XML)技术自诞生以来,极大地改善了Web应用程序的用户体验。`ajax4jsf`作为一个专门为JSF(JavaServer Faces)框架设计的AJAX组件...

    Atlas/ajax基础教程——范例源码

    6. **错误处理**:理解如何在Ajax请求中捕获和处理可能出现的错误,确保程序的健壮性。 7. **范例源码**:每个文档(如6471ch01_final_idxv2.doc到6471ch11_final_idx_v2.doc)可能对应一个或多个示例,详细解释了...

    Ajax学习——DWR的参考书和实用案例学习总结

    3. **Controls**:DWR还提供了丰富的UI控件,如表格、树形结构等,这些控件可以直接与服务器进行数据交换,无需手动处理Ajax请求和响应。 4. **Caching**:DWR支持缓存策略,可以有效地减少网络传输,提高性能。 #...

    Ajax功能 实现许愿墙 —— wish

    分页则可以通过设置每页显示的许愿数量,结合Ajax请求不同页码的数据来实现。 最后,考虑到安全性,前端需要对用户输入进行验证,防止SQL注入等攻击。同时,服务器端也要进行数据校验和过滤,确保数据安全。 综上...

    Ajax实战——深入理解AJAX

    【Ajax实战——深入理解AJAX】 Ajax,全称为"Asynchronous JavaScript and XML",是一种在无需刷新整个网页的情况下,能够更新部分网页内容的技术。Ajax的核心在于利用JavaScript与服务器进行异步数据交换,结合XML...

    ajax学习——自学文件

    1. **创建XMLHttpRequest对象**:在JavaScript中,首先需要创建一个XMLHttpRequest对象,这是Ajax的基础。现代浏览器通常都内置了这个对象,老版本的IE则需要通过ActiveXObject来创建。 2. **建立连接**:使用...

    Ajax征服——Ajax小偷模块 源码

    在"Ajax征服——Ajax小偷模块 源码"中,我们可能会涉及到以下几个关键知识点: 1. **XMLHttpRequest对象**:这是Ajax的基础,用于在后台与服务器进行通信。通过创建XMLHttpRequest实例,我们可以打开到服务器的连接...

    Ajax征服——相册模块 源码

    在Ajax请求中,可以将数据序列化为JSON字符串发送到服务器,服务器处理后返回同样格式的响应。 ### 3. 相册模块设计 一个基本的相册模块应包含以下功能: - **图片加载**:使用Ajax动态加载图片,避免一次性加载...

    谷歌浏览器插件—— Ajax Interceptor

    Ajax Interceptor 是一款专为谷歌浏览器(Chrome)设计的插件,它允许开发者在Ajax请求发送后和响应返回前进行干预,从而实现对AJAX请求数据的修改。这款插件对于前端开发、调试以及测试来说是一个强大的工具,特别...

    Ajax异步请求服务器(jquery)

    **Ajax异步请求服务器——基于Jquery** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个页面的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使得网页实现异步更新。在本...

    7、使用JSON向服务器发送数据——ajax基础笔记

    在“使用JSON向服务器发送数据——ajax基础笔记”这个主题中,我们首先会了解如何创建一个XMLHttpRequest对象。在JavaScript中,你可以通过`new XMLHttpRequest()`来实例化一个对象,然后利用它的方法如`open()`、`...

    Ajax征服——留言本

    - **后端处理**:服务器端接收并处理Ajax请求,可能涉及数据库操作,如存储新留言、检索旧留言等。 - **动态更新**:接收到服务器响应后,JavaScript将新数据插入到页面的适当位置,更新留言列表。 3. **Ajax请求...

    Ajax征服——聊天室开发 源码

    6. **服务器端处理**:服务器接收到Ajax请求后,需要处理这些消息,可能涉及到数据库操作,如存储用户发送的消息,然后广播给其他在线用户。 7. **实时性**:为了实现实时聊天,可能需要使用WebSocket或者Server-...

    Ajax教程 AJAX——新手快车道

    2. **安全问题**:由于AJAX请求仍然遵循同源策略,跨域请求需要服务器端设置CORS头。 3. **SEO挑战**:搜索引擎爬虫可能无法抓取通过AJAX加载的内容,影响页面的搜索引擎排名。 **六、现代Web中的AJAX** 随着Fetch...

    Atlas基础教程——ASP.NET Ajax快速开发 code

    【标题】"Atlas基础教程——ASP.NET Ajax快速开发 code"主要涵盖了使用ASP.NET框架与Ajax技术进行高效Web应用开发的知识点。Atlas是微软在早期推出的一个用于构建富客户端Web应用程序的框架,它允许开发者在不刷新...

    Ajax开发精要——概念、案例与框架

    4. **Vue.js的Axios插件**:Vue生态中的常用插件,结合Vue的组件化特性,方便地处理Ajax请求。 **四、Ajax案例分析** 1. **无限滚动**:在新闻网站或社交媒体中,当用户滚动到底部时,通过Ajax加载更多内容,无需...

    J2EE——Ajax——dwr——配置文件

    总结来说,J2EE中集成Ajax和DWR涉及的主要步骤包括:配置`dwr.xml`以定义可调用的Java对象和方法,设置`web.xml`中的DWR Servlet以处理Ajax请求,引入DWR的依赖库,并在HTML页面中引入DWR的JavaScript库。...

    Ajax基础学习资料

    ### Ajax基础学习资料知识点解析 #### 一、Ajax概述 **定义:** Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术组合,通过在后台与服务器进行少量数据交换,使得网页能够异步更新。这...

Global site tag (gtag.js) - Google Analytics