Ajax 引见一
日期：2014-05-16 浏览次数：20615 次
Ajax 介绍一
?
Ajax 介绍一
1.Ajax技术
? 全称Asynchronous(异步) JavaScript And XML
? 异步的JavaScript和XML
2.Ajax技术的作用，有什么好处
? 用于客户端和服务器交互的一项技术.
?主要用于局部刷新.提升用户体验度.?
----原有交互技术主要基于提交表单，点超链接方式----
这种方式主要有以下一些弊端：
? a.请求发出后，如果响应速度慢，客户需要等待.而且是茫然的等待.
? b.请求响应回来需要刷新整个页面，如果页面中有需要频繁更新的数据，会造成页面的频繁刷新.
? ? 采用Ajax技术可以解决以上问题,提升用户体验度.
3.Ajax技术原理
? Ajax技术是若干技术的综合运用。主要涵盖JavaScript,XMLHttpRequest,XML,css,Html
? Ajax技术使用时，需要编写客户端脚本和 服务器端处理程序.
? 原理：
? ? ?a.首先客户端利用JavaScript创建一个XMLHTTPRequest对象
? ? ?b.利用XMLHTTPRequest对象，创建和发生应该请求
? ? ?c.请求到达服务器，调用Servlet组件处理，处理完毕后,返回响应数据，数据可以采用字符串或XML格式返回.
? ? ?d.XMLHTTPRequest接收到服务器返回的数据，调用客户端的回调函数，将更新到页面.
4.XMLHttpRequest对象的使用
? 该对象是由浏览器提供的,在IE中该对象以ActiveXObject组件形式存在，
? 在其他浏览器中以XMLHttpRequest形式存在.
?XMLHttpRequest对象主要的函数和属性如下：
? 1)open(param1，param2,[param3])函数:创建一个请求.
? ? param1:用于指定请求类型,可以是GET，POST
? ? param2:用于指定请求url地址
? ? param3:用于指定请求发出方式，true异步，false表示同步。默认异步。
? 2)send(param1)函数，发送请求
? ? 把open的请求发送出去.
? ? param1:用于指定发送时提交的数据.如果是GET请求,param1指定为null
? ? ?如果是POST请求需要指定为"key=value"
? 3)onreadystatechange事件
? ? 用于指定注册的回调函数.指定函数名不需要()
? ? 该事件在readyState属性发生改变的时候触发.
? 4)readyState属性
? ? 该属性有0，1，2，3，4五种状态?????
? ? 0:请求未初始化
? ? 1:请求已初始化
? ? 2:请求已发送
? ? 3:请求正在处理中
? ? 4:请求处理完毕.
? 5)status属性
? ? ?用于获取请求处理的状态码.例如：500,404等.
? ? ?404：找不到处理资源
? ? ?500：找到处理资源，执行错误
? ? ?200：处理成功
? 6)responseText属性
? ? 用于获取服务器处理返回的字符串信息.
? ? 需要在readyState==4&&status==200执行，才可以获取正常数据.
? 7)responseXML属性(过时)
? ? 用于获取服务器返回的XML结果对象.
5.Ajax程序编写步骤
? 示例1:焦点移开，检查用户名非空和唯一性.
? ? ? ?1)为用户名输入框添加onblur事件处理
? ? ? ?2)在事件处理中,创建XMLHttpRequest对象
? ? ? ? ?创建请求，发送请求.
? ? ? ?3)编写服务器处理组件Servlet，返回字符串信息
? ? ? ?4)编写回调函数,为创建XMLHttpRequest对象注册.
JSP页面：
<html>
<head >
<title> Ajax01</ title>
<script type= "text/javascript">
//创建XMLHttpRequest对象
function getXmlHttpRequest() {
var xhr = null ;
if (window.XMLHttpRequest) {//firefox,safari
xhr = new XMLHttpRequest();
} else {//ie
xhr = new ActiveXObject("Microsoft.XMLHTTP" );
}
return xhr;
}
var xhr = null;
//焦点离开时触发用户名检查
function checkForm() {
//检查用户名
var name = document.getElementById("username" ).value;
if (name == "" ) {//检查用户名非空
var nameSpan = document.getElementById("usernamespan" );
nameSpan.innerHTML = "用户名不能为空!" ;
return false ;
} else {//检查用户名唯一性
xhr =
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
