Ajax基础总结

jhlovett · 发表于 2013-1-23 02:43:20

AJAX基础

异步对象链接服务器

步骤:
1.创建XMLHttpRequest异步对象
   var xmlHttp;        function createXMLHttpRequest() {            if (window.ActiveXObject) {//判断是否是IE核心浏览器                var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];                for (var i = 0; i < activexName.length; i++) {                    try {                        xmlHttp = new ActiveXObject(activexName[i]);                        break;                    } catch (e) {                                             }                }            } else if (window.XMLHttpRequest) {//判断是否是标准DOM浏览器(如火狐就是标准DOM浏览器)                xmlHttp = new window.XMLHttpRequest();            }        }
2.建立请求

xmlHttp.open("get","test.aspx",true);/*xmlHttp.open方法第一个参数表示请求方式分别是get,post第二个参数代表所要请求的页面第三个参数代表是否使用异步请求:true为使用异步请求false为同步交互*/
3.判断异步对象与服务器交互的状态

//xmlHttp.onreadystatechange事件代表当服务器状态发生变化的时候则调用该函数//readyState==4代表服务器交互的状态是否成功.//同时判断Http.status=200代表服务器的交互状态xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState==4 && xmlHttp.status==200){//code block......}}
4.send()发送

xmlHttp.send(null);//如果是get请求,则使用xmlHttp.send(null);就可以了.
示例1:

<script type="text/javascript"> var xmlHttp;        function createXMLHttpRequest() {            if (window.ActiveXObject) {//判断是否是IE核心浏览器                var activexName = ["MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];                for (var i = 0; i < activexName.length; i++) {                    try {                        xmlHttp = new ActiveXObject(activexName[i]);                        break;                    } catch (e) {                                             }                }            } else if (window.XMLHttpRequest) {//判断是否是标准DOM浏览器(如火狐就是标准DOM浏览器)                xmlHttp = new window.XMLHttpRequest();            }        }function startRequest(){createXMLHttpRequest();xmlHttp.open("get","Default.aspx",true);xmlHttp.onreadystatechange=function(){if(xmlHttp.readyState ==4 && xmlHttp.status==200){document.getElementById("msg").innerHTML=xmlHttp.responseText;}}xmlHttp.send(null);}</script></head><body><input type="button"  value="测试"/><div id="msg"></div></body></html>
Default.aspx页面:

public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) {       Response.Write("成功啦!");       Response.End(); }}
GET VS POST:
GET:

var queryString="firstName=isaac&birthday=0624";//向服务器发送的数据var url="Default.aspx?"+queryString+"&timestamp="+new Date().getTime();//这里的timestamp参数,使得每一次点击的时候都发送不同的数据,这里主要为了避免IE浏览器的自动缓存//通过timestamp="+new Date().getTime();使得每次发送的URL不同,欺骗浏览器每一次都强制刷新xmlHttp.open("get",url);xmlHttp.send(null);//用Get方式时send方法的参数使用null即可,因为所有向服务器发送的数据都放在QueryString的部分
POST:

var queryString="firstName=isaac&birthday=0624";//向服务器发送的数据var url="Default.aspx?"+queryString+"&timestamp="+new Date().getTime();//这里的timestamp参数,使得每一次点击的时候都发送不同的数据,这里主要为了避免IE浏览器的自动缓存//通过timestamp="+new Date().getTime();使得每次发送的URL不同,欺骗浏览器每一次都强制刷新xmlHttp.open("post",url);//POST需要重新设置请求头文件为表单提交的形式xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttp.send(queryString);//该语句负责发送数据,post方式的数据是由send方法提交的.
示例2:

<script type="text/javascript">var xmlHttp;function createXMLHttpRequest(){try{xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");}catch(e){stry{xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");}catch(e){xmlHttp=new XMLHttpRequest();}}}function createQueryString(){var firstName=document.getElementById("firstName").value;var birthday=document.getElementById("birthday").value;var queryString="firstName="+firstName+"&birthday="+birthday;return encodeURI(encodeURI(queryString));//两次转码解决传递的参数中文乱码问题//在ASP.NET中Post请求传递的数据则不会乱码,你可以去除转码的方法做试验,而get方法必须转码否则会乱码.}function handleStatusChange(){if(xmlHttp.readyState==4 && xmlHttp.status==200){document.getElementById("serverRequest").innerHTML=decodeURI(xmlHttp.responseText);//解码操作.}}function doRequestUsingGet(){createXMLHttpRequest();var url="Default.aspx?"+createQueryString()+"&timestamp="+new Date().getTime();xmlHttp.open("get",url);xmlHttp.onreadystatechange=handleStatusChange;xmlHttp.send(null);}function doRequestUsingPost(){createXMLHttpRequest();var queryString=createQueryString();alert(queryString);var url="Default.aspx?timespan="+new Date().getTime();alert(url);xmlHttp.open("post",url);xmlHttp.onreadystatechange=handleStatusChange;xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");xmlHttp.send(queryString);}</script></head><body><h2>请输入姓名和生日</h2>姓名:<input type="text" id="firstName"/><br />生日:<input type="text" id="birthday" /><br /><input type="button"  value="get" /><input type="button" value="post"  /><div id="serverRequest"></div></body></html>
aspx页面

public partial class _Default : System.Web.UI.Page{ protected void Page_Load(object sender, EventArgs e) {       String URL = "GET";       if (Request.HttpMethod=="POST")       {          URL = "post";       }       Response.Write(URL+":"+Request["firstName"]+" your birthday is "+Request["birthday"]);       string a=Request["firstName"]; }}
小结:

AJAX 组成
1.表示　　　　　　XHTML+CSS
2.动态显示和交互　DOM
3.数据交互和操作　XML、XSLT
4.异步数据获取　　XMLHttpRequest
5.绑定和处理数据　JavaScript

----------------------------------------
XMLHttpRequest 对象

      Number readyState 4
属 Function onreadystatechange
      string responseText
      XMLDocument responseXML
性 Number status 200
      string statusText OK
      void open(string,string,boolean) //打开到服务器的连接
       第一个参数的可以使用的请求方式:GET,POST,HEAD,PUT,DELETE
        OPTIONS,TRACE
       第二个参数为指定的请求地址:url
       第三个参数代表是否异步请求,true为异步请求:true

方 void send(string) //发送请求
      void setHeader(string,string) //设置Http头信息
　 string getResponseHeader(string) //获得某个Http头信息
法 string getAllResponseHeaders() //获取所有Http头信息
     void abort() //终止异步交互
----------------------------------------

AJAX相关技术
１、JavaScript
２、XHTML可扩展的超文本标记语言 (HTML)
３、CSS (层叠样式表)
４、DOM (文档对象模型)
５、XML (可扩展标记语言) 有很多用途,最典型的是可以让程序员自己去定义标签.
６、XSTL (可扩展的样式表转换语言) 最主要的功能是将XML转换为HTML,还可以将数据转换成xml文件或pdf文件等
７、XMLHttpRequest

		自动登录	找回密码
密码			立即注册