AJAX简单应用

提到ajax大家都很清楚,其主要的作用就是异步提交数据。基本上所有的ajax应用程序都有雷同的流程:

1、从 Web 表单中获取需要的数据。

2、建立要连接的 URL。

3、打开到服务器的连接。

4、设置服务器在完成后要运行的函数。

5、发送请求。

下面简单介绍上面流程的实现过程:

1.基本上实现异步操作主要是靠操作一个对象,即XMLHttpRequest对象。所以首先应该建立并实例化一个          XMLHttpRequest对象:var
xmlHttp=new XMLHttpRequest object;

2.获取web界面要传递的数据,这个很简单,如下:

var city = document.getElementById("city").value;

3.发出ajax请求:

1)// 建立URL连接

var url = "/scripts/getZipCode.php?city=" + escape(city)

2) //打开URL连接,其中的参数:第一个为提交方式(get/post);第二个为连接到服务器的地址;第三
个为是否为异步操作,为true表示为异步,为false表示同步,发送请求后必须等到回复才能

xmlHttp.open("GET", url, true);

3)// 设置回调函数,即发送成功后调用的函数

xmlHttp.onreadystatechange = updatePage;

4)// 发送请求

xmlHttp.send(null);

4.处理服务器的相应(此为回调函数中对服务器 发送回来的数据的处理)

function updatePage() {

if (xmlHttp.readyState == 4) {

var response = xmlHttp.responseText;

document.getElementById("zipCode").value = response;

}

}

// 解释:上面有一个属性readyState,为状态码,其值有5个(0,1,2,3,4)为4表示相应服务器的操作应经完
成,可以获取并使用服务器的响应了

总结:自我认为ajax的操作基本上就是这些,其遵循上面的几个步骤:实例化XMLHttpRequest对象,获取连接地址及传送数据,打开连接地址,设置回调函数,发送请求。如果有什么不足的地方,望大鸟指正。

时间: 2024-10-12 23:50:37

AJAX简单应用的相关文章

ajax 简单学习

客户端代码function login(type) { $.ajax({ type: "post", url: "logindo.aspx", data: { user: $("#name").val(),//对应<input type="text" id="name"/>的值 pwd:pwd ////对应<input type="password" id="

ajax简单登录说明

ajax 简单登录说明: //依据id查找节点 function $(id){ return document.getElementById(id); } //依据id查找节点,然后返回节点的value function $F(id){ return $(id).value; } //获得ajax对象 function getXhr(){ var xhr = null; if(window.XMLHttpRequest){ //非ie xhr= new XMLHttpRequest(); }el

asp.net MVC3 + JQuery 的ajax简单使用

一直都没有使用过JQuery,更没使用过JQuery的ajax支持带来的方便,今天试了一下,真是减少了很多工作量,使用方法也比较简单 这里先记下来,以后使用时可以再拿着用. 本应用中,本来是准备使用长链接的方式,在server端有错误消息产生时,能实时返回错误消息.可在使用长链接时,因为.net功底 不够,以失败告终!所以采用了javascript中间隔查询的方法. 页面代码如下: Java代码   @{ ViewBag.Title = "ErrorMonitor"; } <sc

Ajax简单用户的注册验证

Ajax的核心是XMLHttpRequest对象 所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject).XMLHttpRequest 用于在后台与服务器交换数据.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 例如:通过Ajax的异步刷新简单验证用户名的可用性 前端JSP页面代码: <%@ page language="java" contentType="text/html; charse

ajax简单封装

var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性 xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓

php的ajax简单实例

很早就听闻ajax的名声,但是却一直不知道怎么用,今天自己捣鼓了一下,竟然会用了,哈哈哈哈. 为了防止我自己忘记,现在把这个简单的实例记录下.这个实例是网上搜的,文末附上链接. 首先你得有自己的服务器,这个我已经采用xampp配置好了. 实现ajax需要三个文件,一个是html的表单文件,一个是js的核心文件,一个是php的后台文件.具体的文件如下所示: 下面的是test.html文件,当键盘按下时触发showHint方法,在showHint方法中会有ajax的核心内容,实例化,获取地址,获取数

smarty+php+ajax 简单无刷新分页

简介 分页,无非就是从数据库中获得我们想查询的数据,再加以处理即可! ① 确定数据总数($count) ② 每页显示数据条数($pageSize) ③ 分多少页($pageCount) ④ 上一页($pagePrev) ⑤ 下一页($pageNext) ⑥ 判断越界问题 ⑦ 偏移量($offset) ⑧ sql语句($sql = "select * from goods limit $offset,$pageSize";) 简单归简单,我们还得考虑实际的应用.例如:如果你正在土豆网看&

ajax简单页面

简单的注册页面运用ajax 主页面 <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><script src="../jquery/jquery-1.11.2.min.js"></script>//首先引用jquery文件</hea

php+JQuery+Ajax简单实现页面异步刷新

页面显示如下: JQueryAjax.html中的代码如下(用的较为简单的$.post) <html> <head> <meta charset="UTF-8"> <title>JQueryAjax+PHP</title> <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"