ホームページ > 記事 > ウェブフロントエンド > AJAX XMLHttpRequest オブジェクトの詳細説明
AJAX XMLHttpRequest オブジェクトの詳細説明
- 亚连オリジナル
- 2018-05-24 10:40:101747ブラウズ
この記事では、主に AJAX XMLHttpRequest オブジェクトについて詳しく紹介します。興味のある方は参照してください。AJAX は、対話型 Web アプリケーションを作成するための Web 開発テクノロジであり、非同期の Javascript と XML のコレクションです。その中心となるのは XMLHttpRequest オブジェクトで、ページ全体をサーバーに送信せずに Web ページを部分的に更新できます。これは、AJAX Web アプリケーション アーキテクチャの重要なテクノロジです。
基本属性:
基本メソッド:
XMLHttpRequest の 5 ステップのメソッド:
2 番目: コールバック関数を登録します
3 番目: サーバーと対話するためのパラメーターを設定します
4 番目:サーバーに送信されるデータを設定し、サーバーとの対話を開始します
5 番目: サーバーとの対話が完了したかどうかを判断し、サーバーが正しいデータを返すかどうかを判断します
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 p = document.getElementById("message");
p.innerHTML = message;
}
}
}
}
</script>
</head>
<body>
<input type="text" id="userName" />
<input type="button" value="用户名校验" onclick="submit()" />
<br />
<p id="message"></p>
</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();
}
}
}
以上、皆さんの参考になれば幸いです。
関連記事:
Ajaxは都市名を通じてデータを取得MVCとブートストラップAjaxフォーム検証の出会いAJAXリクエストキューの実装以上がAJAX XMLHttpRequest オブジェクトの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。