通过实例来理解ajax

点击一个按钮,然后将信息显示到指定的div内。

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>FirstTest.html</title>
 5      <script language="javascript">
 6         function onclickAjax(){
 7             var xmlHttp;
 8             //分浏览器创建XMLHttp对象
 9 if(window.XMLHttpRequest){
10                 xmlHttp=new XMLHttpRequest();
11             }else if(window.ActiveXObject){
12                 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP")
13             }
14             //设置请求类型
15             xmlHttp.open("POST","test.do?method=ajaxTest&&msg="+new Date(),true);
16             //回调函数
17             xmlHttp.onreadystatechange=function(){
18                 if(xmlHttp.readyState==4){
19                     if(xmlHttp.status==200){
20                         document.getElementById("testid").value=xmlHttp.responseText;
21                     }else{
22                         alert("AJAX服务器返回错误!");
23                     }
24                 }
25             }
26             //发送请求
27             xmlHttp.send();
28         }
29      </script>
30   </head>
31
32   <body>
33     <input type="button" value="测试" onclick="onclickAjax()">
34     <div id="testid">
35     </div>
36   </body>
37 </html>

时间: 2025-01-01 05:41:40

通过实例来理解ajax的相关文章

JAVA EE 项目经常使用知识 之AJAX技术实现select下拉列表联动的两种使用方法(让你真正理解ajax)

ajax 下拉列表联动的使用方法. ajax的定义: AJAX 是一种用于创建高速动态网页的技术. 通过在后台与server进行少量数据交换,AJAX 能够使网页实现异步更新.这意味着能够在不又一次载入整个网页的情况下,对网页的某部分进行更新. ajax效果的一个样例: 区域为空的时候,维护人情况: 选了一个区域后的情况:(选 舒城县 联带出来的维护人员 小刘) 一.原生态的js实现 XMLHttpRequest 是 AJAX 的基础 XMLHttpRequest 对象 全部现代浏览器均支持 X

JavaScript大杂烩12 - 理解Ajax

AJAX缘由 再次谈起这个话题,我深深的记得就在前几年,AJAX被炒的如火如荼,就好像不懂AJAX,就不会Web开发一样.要理解AJAX为什么会出现,就要先了解Web开发面临的问题. 我们先来回忆一下Web页面的申请过程,这个咱们在第一篇中就介绍过了:Web页面开发就是在无连接和无状态的HTTP协议上管理页面的状态.每次申请页面的时候,服务器都会返回完整的HTML文本(当然还有其他的文本文件),浏览器就负责解析这个文本并在浏览器中显示. 在这个过程中,不管当前页面的内容是不是都变化了,服务器都会

深入理解ajax系列第八篇

前面的话 在以前,网站的用户与后端交互的主要方式是通过HTML表单的使用.表单的引入在1993年,由于其简单性和易用性,直到电子商务出现之前一直保持着重要位置.理解表单提交,对于更深入地理解ajax是有好处的.下面将详细介绍表单形式的交互 建立表单 表单处理是一个多线程.首先创建一个表单,以供用户输入详细的请求信息.接着,输入的数据被发送到网页服务器,在服务器里这些数据得到编译和错误检测.如果PHP代码标识出一个或多个需要重要输入的字段,则带有相关错误信息的表单会重新显示.当精确的输入信息满足代

逐渐深入地理解Ajax

Ajax的基本原理是:XMLHttpRequest对象(简称XHR对象),XHR为向服务器发送请求和解析服务器响应提供了流畅的接口.能够以异步方式从服务器获得更多信息.意味着用户不必刷新页面也能取得新数据,然后通过DOM将数据插入到页面中. XMLHttpRequest对象方法如下: about():停止当前的请求: open("method","URL",[asyncFlag]) : 等常见的方法: XHR的基本用法: 在使用XHR对象时,要调用的第一个方法是op

客户端-服务器端互动比较与原生实例(比较ajax,server-sent event,websocket/netsocket)

昨日学习了websocket的原生实例,觉得有必要把几种常见的客户端-服务器端无刷新交互形式列举比较: 一.Ajax:客户端决定何时主动向Server端发请求 如:无刷新评论.无刷新更换图片. 主要目的是为了无刷新客户体验,但都是客户端的操作来触发向Server发送请求. 实例网上很多,原生的js或封装了的jQurey都算比较常用.易懂.易自助修改的方式. 二.Server-sent event:定时由Server端向客户端推送内容 如:每秒推送股市动态.每秒推送体育比赛文字转播. 特点是客户端

通过一个WPF实例进一步理解委托和事件

在前写过"浅谈C#中的委托"和"浅谈C#中的事件"两篇博客,内容有些抽象,似乎难以说明委托和事件的关系. 今天通过一个小程序来进一步说明二者的使用及联系. 首先新建一个WPF应用程序,取名TestDelegateAndEvent. 在.xmal中加入四个按钮,并添加Window_Loaded事件. 代码如下: <Window x:Class="TestDelegateAndEvent.MainWindow" xmlns="http

理解Ajax

1.优化原则 优化的目的是希望降低程序的整体开销.虽然在程序中有许多因素可以优化,但是通常人们会认为这个开销就是程序的执行时间.其实我们更应该把重点放在对程序整体开销最大的那部分. 2.一切都是权衡.当我们做性能优化时,不要浪费时间去尝试为那些不消耗大量时间的代码提速.评估优先,拒绝任何不能提高良好效益的优化. 3.浏览器通常在运行javascript上花费的时间很少,绝大部分时间消耗在DON上. 4.为质量编程.简洁.易读且条理分明的代码更容易于正确理解.维护和优化.避免耍小聪明,除非可以证明

深入理解ajax系列第七篇

前面的话 虽然ajax全称是asynchronous javascript and XML.但目前使用ajax技术时,传递JSON已经成为事实上的标准.因为相较于XML而言,JSON简单且方便.本文将上一篇中的实例进行改写,以JSON的方式来进行数据传递 前端页面 <!-- 前端页面 --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

Ajax学习--理解 Ajax 及其工作原理

Ajax 是 Asynchronous JavaScript and XML(以及 DHTML 等)的缩写. 下面是 Ajax 应用程序所用到的基本技术:• HTML 用于建立 Web 表单并确定应用程序其他部分使用的字段. • JavaScript 代码是运行 Ajax 应用程序的核心代码,帮助改进与服务器应用程序的通信. • DHTML 或 Dynamic HTML,用于动态更新表单.我们将使用 div.span 和其他动态 HTML 元素来标记 HTML. • 文档对象模型 DOM 用于(