Ajax基础
1.1认识Ajax
Ajax(Asynchronous JavaScript And Xml),Ajax不是一种全新的技术,而是整合了几种现有的技术JavaScript、XML和CSS。是一种创建交互式网页应用的网页开发技术。
异步:JavaScript脚本发送请求后并不是一直等着服务器响应,而是发送请求后继续做别的事,请求响应的处理是异步完成的。
XML :用于请求数据和响应数据的封装,CSS用于美化页面样式。
1.2Ajax的关键元素
JavaScript语言 :Ajax技术的主要开发语言。
DOM文档对象 :通过DOM属性或方法修改局部元素,实现页面局部刷新。
CSS样式表:改变样式,美化页面效果,提成用户体验度。
XMLHttpRequest对象:以异步方式在客户端与服务器端之间传递数据。
1.3 创建XMLHttpRequest对象
老版本(IE5和IE6):
xmlHttpRequest = new ActiveXObject(“Microsoft.XMLHTTP”);
新版本和其他大部分浏览器:
xmlHttpRequest = new XMLHttpRequest();
1.4. XMLHttpRequest对象的常用方法和属性
方法:
open() :用于创建一个新的HTTP请求,并指定此请求的方法、URL、是否异步提交及验证信息。
send():发送请求到服务器。
abort():取消当前请求。
setRequestHeader():单独指定请求的某个HTTP头。
getResponseHeader() :从响应中获取指定的HTTP头。
getAllResponseHeader():获取响应的所有HTTP头。
属性;
readyState:返回请求的当前状态。常用值:0表示未初始化 1表示初始化 2表示发送数据 3表示数据传送中 4表示数据接收完毕
status:返回当前请求的HTTP状态码。常用值:200表示正确返回 404表示找不到访问对象
responseText:以文本形式获取响应值。
responseXML:以XML形式获取响应值,并且解析成DOM对象返回。
statusText:返回当前请求的响应行状态。
onreadystatechange:设置回调函数。
1.5使用Ajax发送请求及处理响应
发送get请求及处理文本方式响应:
1)创建XMLHttpRequest对象,通过window.XMLHttpRequest的返回值判断创建XMLHttpRequest对象的方式。
2)设置回调函数,通过onreadystatechange属性设置回调函数,其中回调函数需要自定义。
3)初始化XMLHttpRequest组件。通过open()方法创建一个设置了发送方式和请求路径的HTTP请求。
4)发送请求。
<script type="text/javascript"> function checkUser(){ /* 1.创建XMLHttpRequest对象 注意:创建对象前先要判断浏览器的版本 */ if(window.XMLHttpRequest){//返回值为true时,说明是新版本IE或其他浏览器 xmlHttpRequest = new XMLHttpRequest(); }else{//返回值为false时,说明是老版本IE xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP"); } /* 2.设置回调函数 callBack是自定义回调函数 注意:这里只写函数的名称不写小括号 */ xmlHttpRequest.onreadychange = callBack; /* 3.初始化XMLHttpRequest组件 open方法的参数说明 参数1:发送数据的方式,get/post 参数2:发送的请求地址以及发送的数据 参数3:true/false.true时表示使用异步操作 */ var name=document.getElementById("username").valueOf(); //get请求方式 //xmlHttpRequest.open("GET", "doIndex.jsp?name="+name, true); //post请求方式 xmlHttpRequest.open("POST", "doIndex.jsp", true); xmlHttpRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); /* 4.发送请求 */ //xmlHttpRequest.send(null); //post xmlHttpRequest.send("name="+name); } function callBack(){ if(xmlHttpRequest.readyState==4 && xmlHttpRequest.status==200){ var result = xmlHttpRequest.responseText; var resp=document.getElementById("result"); if(result.replace(/\s+/,"")=="true"){ resp.innerHTML="<font color='green'>用户名可以使用</font>"; }else{ resp.innerHTML="<font color='red'>用户名已占用</font>"; } } } </script>
相关推荐
关于Ajax的常见面试题 1,Ajax和javascript的区别? javascript是一种在浏览器端执行的脚本语言,Ajax是一种创建交互式网页应用的开发技术 ,它是利用了一系列相关的技术其中就包括javascript。 Javascript是由...
本卷从最易于理解和使用的那部分入手,介绍ASP.NET AJAX框架中能够与传统ASP.NET无缝对接的服务器端部分,包括服务器端ASP.NET AJAX Extensions与ASP.NET AJAX Control Toolkit。这部分内容不需要读者有任何的客户端...
Android Webview虽然提供了页面加载及资源请求的钩子,但是对于h5的ajax请求并没有提供干涉的接口,这意味着我们不能在webview中干涉javascript发起的http请求,而有时候我们确实需要能够截获ajax请求并实现一些功能...
在ajax中使用post方法,用常规的参数格式:param1=a1¶m2=a2 ,当参数长度过长时,依然提交不成功。比如我们经常这样写一个ajax的post请求: $.ajax({ type: "post", // post or get contentType:"application...
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件
ajax ajax原理 ajax代码 ajax编程 ajax学习
ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效ajax特效
使用Ajax实现从服务器读取数据,包括Ajax实现的详细步骤
ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础教程源代码ajax 基础...
学习的网上的一个ajax版注册程序,对界面进行了改变!是适合学习ajax的朋友的一个好的例子!
掌握 Ajax第 1 部分-Ajax 简介 掌握 Ajax第 2 部分-使用 JavaScript 和 Ajax 发出异步请求 掌握 Ajax第 3 部分-Ajax 中的高级请求和响应 掌握 Ajax第 4 部分-利用 DOM 进行 Web 响应 掌握 Ajax第 5 部分-操纵 DOM ...
ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件ajax控件...
并应用上述知识开发了8个基于AJAX的Web应用系统,如基于AJAX的文件和图像处理、AJAX祝福墙、AJAX留言簿、AJAX聊天室、AJAX RSS阅读器、AJAX相册、基于AJAX的电子邮件处理等。最后以两个大型的AJAX Web应用系统(基于...
Ajax + JavaScript + MySQL 实现的Ajax分页功能
Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码 Ajax Ajax本质 Ajax本质源码
第 1 部分:Ajax 简介 第 2 部分:: 使用 JavaScript 和 Ajax 发出异步请求 第 3 部分: Ajax 中的高级请求和响应 第 4 部分: 利用 DOM 进行 Web 响应 第 5 部分: 操纵 DOM 第 6 部分: 建立基于 DOM 的 Web 应用程序 第...
ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子ajax例子
ajax 分页ajax 分页ajax 分页
看到网上很多想用ajax的树的例子,很奇怪,明明TreeView自带AJAX功能,取非要自己去写一大堆代码, 工作量增加了,而性能又没有提高多少 正好自己这次用到了,就做了一个例子,供大家一起研究参考 注:顺便下载了一...
ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解 ajax详解ajax详解ajax详解