Ajax 初步学习总结
2013-09-15 20:50
411 查看
Ajax是什么
Ajax是(AsynchronousJavaScript And XML)是异步的JavaScript和xml。也就是异步请求更新技术。Ajax是一种对现有技术的一种新的应用,不是一门新语言。它是用JavaScript编写。与xml的关系就是可以读取和返回xml文件。
Ajax的核心对象
通过不必把Web页面寄送到服务器而实现数据传送,XMLHttpRequest对象为客户端与服务器之间提供了一种动态的交互能力。XMLHttpRequest用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
方法:
xmlHttpRequst对象利用send()和open()方法与服务器进行交互。
open(method,url,async)
method:请求的类型;GET或
POST
url:文件在服务器上的位置
async:true(异步)或
false(同步)
send(string)
string:仅用于
POST 请求
如果是post请求,必须使用
setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中设置发送的数据:
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
如何实现异步操作呢?
ajax通过xmlhttpRequest对象执行操作,其中xmlhttpRequest对象是在浏览器中内置的一个对象其运行原理就相当于创建了一个请求代理,通过代理去完成与服务器的交互,交互的过程中客户不需要等待,还可以进行其它的工作,交互完成以后,代理再将交互的结果返回给客户页面。
第一步:创建xmlHttpRequest对象,每个浏览器的创建不是都相同。
var xmlhttp; if (window.XMLHttpRequest) {// IE7+, Firefox, Chrome, Opera, Safari创建方式 xmlhttp=new XMLHttpRequest(); } else {// IE6, IE5 创建方式 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
通常情况下为了兼容所有浏览器,每个都要写上。
第二步:设置open()方法和setRequestHeader()方法参数。
将请求方式,请求目的地址,和请求类型设置到open方法中,如果是post请求,则需要设置setRequestHeader()参数
第三步:发送执行
利用send方法,与服务器真正的交互执行
第四步:获得执行结果
首先判断执行是否完成,然后通过js操作dom元素,将返回的responseText返回到页面
xmlhttp.onreadystatechange=function() { //判断是否发送成功,是否找到请求页面等 if (xmlhttp.readyState==4 && xmlhttp.status==200) { //操作页面元素 document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
用jQuery来进行Ajax开发(实例)
1、请求页面AJax.aspxHTML代码
<div> <input id="txtName" type="text" /><input type="button" value="查看用户名是否存在" id="btn" onclick="JudgeUserName();" /> <div id="showResult" style="float:left">div> div>
JS代码 <script type="text/javascript" src="CSS/jquery-1.3.2.js"></script> <script type="text/javascript"> function JudgeUserName() { $.ajax({ type:"GET", url:"AjaxUserInfoModify.aspx", dataType:"html", data:"userName="+$("#txtName").val(), beforeSend:function(XMLHttpRequest) { $("#showResult").text("正在查询"); //Pause(this,100000); }, success:function(msg) { $("#showResult").html(msg); $("#showResult").css("color","red"); }, complete:function(XMLHttpRequest,textStatus) { //隐藏正在查询图片 }, error:function() { //错误处理 } }); } </script>
2 、页面AjaxUserInfoModify.aspx
后台代码
protected void Page_Load(object sender, EventArgs e) { string userName = Request.QueryString["userName"].ToString (); if (userName == "James Hao") { Response.Write ("用户名已经存在!"); } else { Response.Write ("您可以使用此用户名!"); } }
现在是简单的初步认识,后面深入的实践加深理解。
相关文章推荐
- Ajax 初步学习总结
- [置顶] Ajax 初步学习总结
- UML学习之初步总结
- Storm的初步学习总结(一)
- Ajax学习重点总结
- AJAX学习总结
- Jquery重新学习之九[Ajax运用总结C]
- 状态保持以及AJAX的初步学习
- 学习struts2建bbs总结五:使用jquery+ajax验证用户名是否存在以及struts效验信息不断重复的问题
- Ajax和Jquery学习总结(1)
- Hadoop MapReduce 初步学习总结
- Ajax 学习总结
- Ajax 学习总结[转载]
- JS学习笔记 —— 原生Ajax总结
- Hive初步学习总结
- 自我学习总结1:ajax实现编辑框的验证
- JDBC2和JSP初步--4月23号学习总结
- AJAX技术学习总结
- PHP框架之ThinkPHP的学习总结(1) AJAX
- 【JQuery学习总结2 】Jquery字符串, 数组(拷贝、删选、合并等), each循环,阻止冒泡,ajax出错,$.grep筛选,$.param序列化