Ajax基础总结
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); 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); 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
页:
[1]