cari

Rumah  >  Artikel  >  hujung hadapan web  >  AJAX XMLHttpRequest对象详解

AJAX XMLHttpRequest对象详解

亚连
亚连asal
2018-05-24 10:40:101745semak imbas

这篇文章主要为大家详细介绍了AJAX 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 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("姓名：&#39;" 
    + username + "&#39;<br/>时间：&#39;" + DateTime.Now.ToString() + "&#39;"); 
   Response.End(); 
  } 
 } 
}

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

Ajax 通过城市名获取数据

MVC遇上bootstrap后的ajax表单验证

AJAX请求队列实现

Atas ialah kandungan terperinci AJAX XMLHttpRequest对象详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：React-router v4使用步骤详解Artikel seterusnya：使用CSS实现乒乓球对打动画

Artikel berkaitan

Lihat lagi