Ajax基础总结

最新推荐文章于 2023-11-20 21:35:13 发布

jhlovett

最新推荐文章于 2023-11-20 21:35:13 发布

阅读量58

点赞数

分类专栏： AJAX 文章标签： Ajax 浏览器 IE JavaScript Microsoft ViewUI

AJAX 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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" οnclick="startRequest();" 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){s
		try{
		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" οnclick="doRequestUsingGet()"/>
<input type="button" value="post" οnclick="doRequestUsingPost()" />
<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

jhlovett

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Ajax基础总结

AJAX基础异步对象链接服务器步骤:1.创建XMLHttpRequest异步对象 var xmlHttp; function createXMLHttpRequest() { if (window.ActiveXObject) {//判断是否是IE核心浏览器 var activexName = ["...
复制链接

扫一扫