XMLHttpRequest对象

最新推荐文章于 2023-09-18 15:19:22 发布

RonTech

最新推荐文章于 2023-09-18 15:19:22 发布

阅读量569

点赞数

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： function FUNCTION javascript JavaScript Javascript javaScript microsoft Microsoft xmlhttprequest xmlHttpRequest 服务器

本文链接：https://blog.youkuaiyun.com/zyhlwzy/article/details/8489869

JS 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了XMLHttpRequest对象如何在JavaScript技术中实现与服务器的异步通信，详细讲解了其在不同浏览器中的创建方法，并提供了完整的AJAX实例，包括表单数据的获取与更新、HTML与XML解析等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

XMLHttpRequest对象：
该对象是处理所有服务器通信的对象。通过XMLHttpRequest对象与服务器进行对话的是javascript技术。这不是一般的应用程序流，这恰恰是ajax的强大之处。
ajax基本上就是将javascript和XMLHttpRequest对象放在WEB表单与服务器之间，当用户填写好表单之后并不是将表单数据直接发送给服务器，而是通过javascript获取表单数据并向服务器发送请求，同时用户屏幕并不会闪烁，消失或者延迟。换句话说，javascript代码向服务器发送请求是幕后操作的，用户甚至不知道请求的发出，而且javascript向服务器发送请求时异步的，在发送请求的同时用户可以继续浏览网页，滚动，或者使用应用程序。
当发送给服务器的数据经过一系列的逻辑处理之后，返回的数据同样是由javascript代码接受，而当接收到后台返回的数据时，javascript代码可以对该数据进行进一步的操作，可以迅速的更新表单数据，让人感觉到应用程序是立即完成的，同时可以对数据进行进一步的运算，再发送另一个请求，而这一切的处理都是不需要用户干预的，这就是XMLHttpRequest对象的强大之处，他可以根据需要自行与服务器进行交互，用户甚至完全不知道幕后所发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。
创建XMLHttpRequest对象：
var httprequest = new XMLHttpRequest();
javascript的基本任务
1、获取表单数据
2、修改表单数据（更行表单数据）
3、解析HTML和XML

对于不同的浏览器，声明XMLHttpRequest对象的方法是有差异的，在IE中，由于可能安装的javascript版本可能不同，所以声明XMLHttpRequest对象的方法也有所不同，声明对象的方法为：
使用Microsoft 浏览器
var xmlhttp = false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
}
catch(e2)
{
xmlhttp = false;
}
}

使用非microsoft浏览器：
var xmlhttp = false;
try
{
xmlhttp = new XMLHttpRequest();
}

支持多浏览器的声明方法：
var xmlhttp = false;
try
{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
}

catch(e2)
{
xmlhttp = false;
}
}

if(!xmlhttp && typeof(XMLHttpRequest) != 'undefined')
{
xmlhttp = new XMLHttpRequest();
}

完整的ajax实例
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
//发出服务器请求
function callserver() {
//声明XMLHttpRequest对象
var xmlhttp = false;
try {
xmlhttp = new ActiveXObject("Mxml2.XMLHTTP");
}
catch (e) {
try {
xmlhttp = new ActiveXObject("Macrosoft.XMLHTTP");
}
catch (e2) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof (XMLHttpRequest) != 'undefined') {
xmlhttp = new XMLHttpRequest();
}
else {
alert("创建XMLHttpRequest对象出错！");
}
//向服务器发送请求
xmlhttp.open("post", "Getdata.ashx?ts=" + new Date(), false); //准备向服务器的Getdate.ashx发出post请求

//监听onreadystatechange()事件，当 readyState 为 3 时，它也可能调用多次。
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var result = xmlhttp.responseText;
document.getElementById("txtbox1").value = result;
}
}
};
xmlhttp.send();
}
</script>
</head>
<body>
<input type="text" id="txtbox1" style="width:300px;" />
<input type="button" onclick="callserver()" value="ajax提交" />
</body>
</html>

Getdata.ashx中处理
namespace WebApplication1.html
{
/// <summary>
/// Getdata 的摘要说明
/// </summary>
public class Getdata : IHttpHandler
{

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string ts = context.Request["ts"];
context.Response.Write(ts);
}

public bool IsReusable
{
get
{
return false;
}
}
}
}

判断用户是否已经注册实例（jquery）

当文本框失去焦点判断用户名是否已经存在

<asp:TextBox ID="LoginName" runat="server" CssClass="txtstyle"></asp:TextBox>
<span id="usernamerepeat" style="color:Red;">用户名已经存在!</span>

jquery代码：
<script src="../Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#usernamerepeat").hide();
var UsernameId = "<%=LoginName.ClientID %>";
var id = "#" + UsernameId;
$(id).blur(function () {
var username = $(id).val();
$.post("RegisterHandle.ashx", { "username": username }, function (data, status) {
if (status == "success") {
if (data == "1") {
$("#usernamerepeat").show();
}

else {
$("#usernamerepeat").hide();
}
}

else {
alert("ajax错误！");
}
});
});
});
</script>

RegisterHandle.ashx处理代码：

public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
//context.Response.Write("Hello World");
string UserName = context.Request["username"];

SqlConnection con = new SqlConnection();//声明管道
con.ConnectionString = System.Configuration.ConfigurationManager.ConnectionStrings["con"].ToString();//连接数据库管道
con.Open();//打开管道

SqlCommand cmd = new SqlCommand();

cmd.CommandText = "select * from Users where UserName=@UserName";//查询
cmd.Parameters.AddWithValue("@UserName", UserName);

cmd.Connection = con;//实行管道通讯

SqlDataReader reader = cmd.ExecuteReader();

if (reader.Read())
{
context.Response.Write("1");
}

else
{
context.Response.Write("0");
}
}