之前写了一遍blog,很笼统的说了说Ajax的原理.新年来的第一个周末,从新来温故知新一下.
1.什么是Ajax
- Ajax不是一种技术,实际上,他由几种蓬勃发展的技术以新的强大方式组合而成的.
- 基于XMLHTML和CSS标准的表示
- 使用Document Object Model进行动态显示和交互
- 是XMLHttpRequest与服务器进行异步通信
- 使用JavaScript绑定一切
2.Ajax工作原理
- 要了解Ajax的工作原理,就要从理解XMLHttpRequest这个对象开始
-
open():建立到服务器的新请求
,XMLHttpRequest对象的open()方法会指定发送的请求.该方法有五个参数:
- request-type:发送请求的类型.典型的值是GET或POST.
- url:要连接的URL.
- asynch:如果希望使用异步连接则为true,否则为false.该参数是可选的默认为true
- username:身份验证(用户名)
- password:身份验证(口令)
通常,Open()方法取3个参数:
一个是指定所用方法(通常是GET或POST)的串;
一个是表示目标资源URL的串;
一个是Boolean值,指示请求是否是异步的
2. send():向服务器发送请求
- 一旦用open()配置好之后,就可以发送请求了,send()只有一个参数,就是要发送的内容,但是在考虑这个方法之前.URL本身发送过数据的.虽然可以使用send()发送数据,但也能通过URL本身发送数据.事实上.GET请求(在典型的Ajax应用大约占80%)中,用URL发送数据要容易的多.如果需要发送安全信息或XML,可能要考虑使用send()传递null作为该方法的参数即可.
3. abort():退出当前请求
4. readyState:提供当前HTML的状态
5. responseText:服务器返回的请求响应文本
6. onreadystatechange:回调方法(回调函数)
- 该属性允许指定一个回调函数.回调允许服务器反向调用文本页面中的代码.它也给了服务器一定程度的控制权,当服务器完成请求之后,会查看XMLHttpRequest对象,特别是onreadystatechange属性.
7.
responseXML:服务器返回的请求响应XML形式组织的文本
代码1:一个详细的XMLHttpRequest对象的创建
<script language="javascript" type="text/javascript">
function getXMLHttpRequest(){
var request = false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
return request;
}
</script>
2.设置服务器URL
首先要确定连接的服务器的URL.这并不是Ajax的特殊要求,但是建立连接所必需的.多数应用程序中都会结合一些静态数据和用户处理的表单中的数据来构造该URL.
function testCheck(){
var name = document.forms[0].username.value;
//var name = document.getElementById("username").value;
if(xmlHttp == null) {
createXMLHttpRequest();
}
var url ="/buyer/checkUser.action?username="+name;
xmlHttp.open("POST",url,true);
xmlHttp.onreadystatechange = checkUsername;
xmlHttp.send(null);
}
3.表单
<s:form action="saveBuyer.action" method="post">
<!-- 已知数据库中有若干用户,当用户输入注册信息时,一旦用户完成了用户名的输入,系统可以立即提示该用户名是否可用,而不是等到用户提交注册请求时才判断用户名是否可用。 -->
<s:textfield label="会员账号" name="username" required="true" id="username"
requiredposition="left" size="36" onblur="testCheck()"/>
<s:actionerror/><div id="result" style="color: red; font-size: 22;"></div>
<!-- onblur当鼠标焦点离开文本框触发事件 -->
</s:form>
分享到:
相关推荐
原生态ajax学习案例
原生态的asp.net ajax demo
ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...
原生态Ajax价绍与使用方法
ajax基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程ajax基础教程ajax础教程ajax基础教程aja基础教程ajax基础教程ajax基础教程ajax基础教程ajax基础教程aax基础教程ajax基础教程
[浪曦原创]AJAX基础教程.ppt,适用于初学ajax的同学
AJAX基础.pdf AJAX基础.pdf AJAX基础.pdf
此封装原生态XMLHttpRequest,实现类似$.ajax调用
ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax 基础教程ajax ...
Ajax文件上传 js上传 异步上传 兼容IE chrome Firefox
原书名:Foundations of Ajax 原出版社: Apress 作者: (美)Ryan Asleson,Nathaniel T.Schutta 译者: 金灵 等 丛书名: 图灵程序设计丛书 出版社:人民邮电出版社 ISBN:7115144818 上架时间:2006-2-14 ...
《Ajax基础教程.chm》 Ajax技术可以提供高度交互的Web应用,给予用户更丰富的页面浏览体验。本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的...
精通Ajax 基础 教程附带源代码及其案例
ajax基础教程登陆小例子ajax基础教程登陆小例子ajax基础教程登陆小例子ajax基础教程登陆小例子
本书重点介绍Ajax及相关的工具和技术,主要内容包括XMLHttpRequest对象及其属性和方法、发送请求和处理响应、构建完备的Ajax开发工具、使用JsUnit测试JavaScript、分析JavaScript调试工具和技术,以及Ajax开发模式和...
ajax的基础知识 我看过还不错
ASP.NET Ajax基础ASP.NET Ajax基础ASP.NET Ajax基础
Ajax作为一门心得技术 ,这两年被广泛应用于网络应用中,并发挥着越来越重要的作用,本文就Ajax得基础知识做一个简单介绍
Ajax 基础教程中文版.pdf
第八章 AJAX基础 第八章 AJAX基础 第八章 AJAX基础 第八章 AJAX基础