Ajax五步使用法

最新推荐文章于 2022-09-12 20:02:04 发布

「已注销」

最新推荐文章于 2022-09-12 20:02:04 发布

阅读量2.3k

点赞数 3

本文链接：https://blog.csdn.net/lidatgb/article/details/8201253

版权

上篇博客较为详细的介绍了一下XMLHttpRequest的属性、方法和事件句柄，这篇博客来介绍一下Ajax的五步使用法。为了直观，用一个简单的例子说明：AjaxClient用于提交用户名，AjaxServer用于判断用户名是否使用，并返回提示。

AjaxClient.html：

<html>
<head>
	<title>ajaxClient</title>
	<script type="text/javascript">
	    var xmlhttp;
	    function submit() 
        {
		    if(window.XMLHttpRequest)
		    {
		    //IE7 above,firefox,chrome^^
			    xmlhttp=new XMLHttpRequest();
			    //为了兼容部分Mozillar浏览器,当来自服务器响应开头不是xml，导致的无法响应问题
			    if(xmlhttp.overrideMimeType)
			    {
				    xmlhttp.overrideMimeType('text/xml');
			    }
		    }
		    else if(window.ActiveXObject)
		    {
			    //IE5\IE6
			    xmlhttp=new activeXObject("Microsoft.XMLHTTP");
		    }
		    if(xmlhttp==null||xmlhttp==undefined)
		    {
			    alert("con't create XMLHttpRequest Object");
		    }
		    var userName = document.getElementById('testText').value;
		    //注册回调函数
		    xmlhttp.onreadystatechange = callback;
		    //发送信息
		    xmlhttp.open('GET','AjaxServer.aspx?name='+userName,true);
		    xmlhttp.send(null);
				
	    }
        function callback() 
        {
	        //判断交互是否完成,是否正确返回
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) 
            {
                //获取服务器返回信息
	            var message = xmlhttp.responseText;
                //得到提示信息div
		        var testDiv=document.getElementById('test');
		        testDiv.innerHTML=message;
	        }
        }
    </script>
</head>
<body>
    <!--用户名输入框-->
    <input type="text" name="wenben" value="" id="testText" />
    <input type="button" name="ceshi" value="submit" οnclick="submit();" />
    <!--用于显示提示信息-->
    <div id="test"></div>
</body>
</html>

AjaxServer.aspx.cs

protected void Page_Load(object sender, EventArgs e)
    {
        string getName = Request["name"].ToString ().Trim();
        if (getName == "lida")
        {
            Response.Write(getName+" 不可用，该用户名已经被使用");
        }
        else 
        {
            Response.Write("可用，该用户名尚未被使用");
        }
    }

如果采用POST方式，则需要更改open()和send()方法，并设置请求头部信息：

//POST方式
//需要制定RequstHeader
//将请求参数写入到send中
xmlhttp.open('POST', 'AjaxServer', true);
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlhttp.send('name='+userName);

测试结果：

第一步：创建XMLHttpRequest，就像以前博客中所说一样，不能采用浏览器检测，要使用能力检测。创建XMLHttpRequest基本是两种，一种是IE5/IE5.5/IE6使用的activeXObject；一种是其它浏览器使用的XMLHttpRequest()。创建一个全局的xmlhttp变量用来存放XMLHttpRequest对象。

第二步：注册回调函数，注意的是仅仅是将回调函数的地址传给onreadystatechange，而不是返回值，所以不能带执行括号。

第三步：设置与服务器交互的方式、地址、参数等信息。

第四步：向服务器发送请求，启动与服务器的交互。

第五步：创建回调函数，让回调函数接收服务端返回的数据，然后更新页面。

如果仅仅是展示一下Ajax服务器与浏览器页面的交互过程，这个示例就够了，但需要掌握的不仅仅是交互的过程，其中涉及到的很多的细节问题，还需要随着学习的深入继续补充。

以前也使用过浏览器自带的调试功能，通过今天调试，发现自带的开发者工具功能还是挺强大的，不但可以调试js，还可以查看源文件、请求和响应等具体内容，附图一张：

「已注销」

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
4
评论
Ajax五步使用法

上篇博客较为详细的介绍了一下XMLHttpRequest的属性、方法和事件句柄，这篇博客来介绍一下Ajax的五步使用法。为了直观，用一个简单的例子说明：AjaxClient用于提交用户名，AjaxServer用于判断用户名是否使用，并返回提示。AjaxClient.html： ajaxClient var xmlhttp; function submit()
复制链接

扫一扫