AJAX XMLHttpRequest对象详解
程序员文章站
2022-10-31 12:02:03
ajax是一种创建交互式网页应用的网页开发技术，是异步javascript和xml的集合。其核心是xmlhttprequest对象，可以在不向服务器端提交整个页面的情况下，...
ajax是一种创建交互式网页应用的网页开发技术，是异步javascript和xml的集合。其核心是xmlhttprequest对象，可以在不向服务器端提交整个页面的情况下，实现局部更新网页，它是ajax的web应用程序架构的一项关键技术。
基本属性：
基本方法：
xmlhttprequest五步法：
第一：创建xmlhttprequest对象
第二：注册回调函数
第三：设置和服务器交互的参数
第四：设置向服务器端发送的数据，启动和服务器端的交互
第五：判断和服务器端的交互是否完成，还有判断服务器端是否返回正确的数据
html代码：
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title></title>
<script type="text/javascript" >
var xmlhttp;
function submit() {
//1、创建xmlhttprequest对象
if (window.xmlhttprequest) {
xmlhttp = new xmlhttprequest();
if (xmlhttp.overrideminetype) {//针对某些特定版本的mozillar浏览器的bug进行修正
//将覆盖发送给服务器的头部，强制 text/xml 作为 mime-type
xmlhttp.overrideminetype("text/xml");
}
} else if (window.activexobject) {//针对ie浏览器进行处理
var activexname = ["msxml2.xmlhttp.6.0", "msxml2.xmlhttp.5.0",
"msxml2.xmlhttp.4.0", "msxml2.xmlhttp.3.0",
"msxml2.xmlhttp", "miscrosoft xmlhttp"];
for (var i = 0; i < activexname.length; i++) {
try{
xmlhttp=new activexobject(activexname[i]);
break;
} catch (e) { }
}
}
if (xmlhttp == undefined || xmlhttp == null) {
alert("当前浏览器不支持插件xmlhttprequest对象，请更换浏览器");
return;
}
//2、注册回调函数
xmlhttp.onreadystatechange = callback;
//获取当前值
var username = document.getelementbyid("username").value;
//设置字符串参数，并进行编码（用于post提交方式）
var args = "username=" + encodeuricomponent(username);
//get 交互
//3、设置和服务器端交互的参数
//xmlhttp.open("get", "xmlhttprequest.aspx?username=" + username, true);
//post交互
//3、设置和服务器端交互的参数
//使用post方式不用担心缓存
xmlhttp.open("post", "xmlhttprequest.aspx?username=" + username, true);
//设置content-type类型，告知服务器实体中有参数
xmlhttp.setrequestheader("content-type", "application/x-www-form-urlencoded");
//4、设置向服务器端发送的数据，启动和服务器端的交互
//用于get提交
//xmlhttp.send(null);
//用于post提交
xmlhttp.send(args);
function callback() {
//5、判断和服务器端的交互是否完成，还有判断服务器端是否正确返回了数据
if (xmlhttp.readystate == 4) {//readystate=4表示交互完成
if (xmlhttp.status == 200) {//status=200表示正确返回了数据
//纯文本数据的接收方法
var message = xmlhttp.responsetext;
var div = document.getelementbyid("message");
div.innerhtml = message;
}
}
}
}
</script>
</head>
<body>
<input type="text" id="username" />
<input type="button" value="用户名校验" onclick="submit()" />
<br />
<div id="message"></div>
</body>
</html>
aspx中的代码：
using system;
using system.collections.generic;
using system.linq;
using system.web;
using system.web.ui;
using system.web.ui.webcontrols;
namespace xmlhttprequest五步法
{
public partial class xmlhttprequest : system.web.ui.page
{
protected void page_load(object sender, eventargs e)
{
//response.clear();
//获取当前值，get提交使用request.querystring方法
//string username = request.querystring["username"];
//post提交，使用request.form
string username = request.form["username"];
response.write("姓名：'"
+ username + "'<br/>时间：'" + datetime.now.tostring() + "'");
response.end();
}
}
}
总结：
xmlhttprequest是ajax的核心部分，需要好好理解。刚开始接触的时候，有些不明白是怎么回事，而且视频中讲的也是原生的ajax，表面上看来不太好理解，但是通过具体的demo实践，就会发现其实这个挺容易理解的。
以上就是本文的全部内容，希望对大家的学习有所帮助。