AJAX XMLHttpRequest对象详解

2024-12-22 12:48:33

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实践，就会发现其实这个挺容易理解的。

以上就是本文的全部内容，希望对大家的学习有所帮助。

使用Ajax技术通过XMLHttpRequest对象完成首页登录功能

最近使用Ajax技术通过XMLHttpRequest对象完成一个首页的登录功能! 代码如下: <script type="text/javascript"> //创建XMLHttpRequest对象 function createXMLHttpRequest(){ if(window.XMLHttpRequest){ return xmlhttprequest=new XMLHttpRequest(); }else{ return xmlhttprequest=new Ac
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法

废话不多说了,关键代码如下所示: <script> $('.screenshot_input').change(function (){ //获取file对象即相当于可以直接post的$_FILES数据 var domFile = $(this)[0].files[0] var domForm = $('#testForm')[0] //将form对象直接作为参数 new FormData对象 var formData = new FormData(domForm); //追加file 对象
通过XMLHttpRequest和jQuery实现ajax的几种方式

示例一:利用Ajax来动态获取时间的例子. HTML代码: <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h
如何用ajax来创建一个XMLHttpRequest对象

我每次创建一个对象,都要这样复杂吗?如下代码: JScript code: "testAjax.htm" 文件: 复制代码代码如下: <html> <body> <script type="text/javascript"> function ajaxFunction() { var xmlHttp; try { // Firefox,Opera 8.0+,Safari xmlHttp=new XMLHttpRequest();
AJAX客户端说明，XMLHttpRequest对象

在CommunityServer中运用了自己的AJAX机制,没有借助其他的辅助控件.其中客户的XMLHttpRequest对象的封装,就足以让人大饱眼福,在一般的浏览器其都能够运行AJAX.下面我们来学习学习这个咚咚,希望能给更多的人带来帮助. 首先当然是要了解一下浏览器中的XMLHttp对象了: XMLHTTP方法: 备注:客户机可以使用XMLHTTP对象发送任意的HTTP请求,接受HTTP应答,还可以对应答的XML文档进行解析. Open方法:初始化一个Msxml2.XM
Ajax核心XMLHttpRequest总结

Ajax:即"Asynchronous JavaScript and XML"(异步JavaScript和XML),一门综合性的技术:运用JavaScript对象XMLHttpRequest进行异步数据交换:JavaScript操作DOM实现动态效果:运用XHTML+CSS表达信息:XML和XSLT操作数据.此篇文章重点介绍使用XMLHttpRequest对象与服务器端进行异步数据交换. 使用方法 XMLHttpRequest五步使用法: 复制代码代码如下: 1.创
解析ajax核心XMLHTTPRequest对象的创建与浏览器的兼容问题

MLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpRequest 对象开始,在不同的浏览器中创建XMLHttpRequest 对象使用不同的方法: 先看看IE创建XMLHttpRequest 对象的方法(方法1): var xmlhttp=ActiveXobject("Msxml12.XMLHTTP");//较新的IE版本创建Msxml12.XMLHT
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML

摘要:本节补充ajax学习笔记1中第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码 .新增一个servlet类 AJAXXMLServer.java 复制代码代码如下: import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServle
AJAX中同时发送多个请求XMLHttpRequest对象处理方法

在ajax应用中,通常一个页面要同时发送多个请求,如果只有一个XMLHttpRequest对象,前面的请求还未完成,后面的就会把前面的覆盖掉,如果每次都创建一个新的XMLHttpRequest对象,也会造成浪费.解决的办法就是创建一个XMLHttpRequset的对象池,如果池里有空闲的对象,则使用此对象,否则将创建一个新的对象. 下面是我最近写的一个简单的类:* XMLHttpRequest Object Pool * * @author legend <legendsky@hotmai
AJAX XMLHttpRequest对象详解

AJAX是一种创建交互式网页应用的网页开发技术,是异步Javascript和XML的集合.其核心是XMLHttpRequest对象,可以在不向服务器端提交整个页面的情况下,实现局部更新网页,它是AJAX的Web应用程序架构的一项关键技术. 基本属性: 基本方法: XMLHttpRequest五步法: 第一:创建XMLHttpRequest对象第二:注册回调函数第三:设置和服务器交互的参数第四:设置向服务器端发送的数据,启动和服务器端的交互第五:判断和服务器端的交互是否完成,还
基于原生ajax与封装的ajax使用方法(详解)

当我们不会写后端接口来测试ajax时,我们可以使用node环境来模拟一个后端接口. 1.模拟后端接口可参考网站整站开发小例子,在打开命令窗口并转到所在项目文件夹下在命令行中输入npm install express --save,安装express中间件. 2.把当中的app.js的内容换成 var express=require('express'); //var path=require('path'); var app=express(); //app.set('view',path.jo
Ajax教程实例详解

什么是 AJAX AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 不是新的编程语言,而是一种使用现有标准的新方法. AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下(AJAX 是一种用于创建快速动态网页的技术). 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新. 传统的网页(不使用 AJAX)如
react中的ajax封装实例详解

react中的ajax封装实例详解代码块 **opts: {'可选参数'} **method: 请求方式:GET/POST,默认值:'GET'; **url: 发送请求的地址, 默认值: 当前页地址; **data: string,json; **async: 是否异步:true/false,默认值:true; **cache: 是否缓存:true/false,默认值:true; **contentType: HTTP头信息,默认值:'application/x-www-form-urlenc
Jquery中$.ajax()方法参数详解

俗说好记性不如个烂笔头,下面是jquery中的ajax方法参数详解,这里整理了一些供大家参考. 1.url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. 2.type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和delete也可以使用,但仅部分浏览器支持. 3.timeout: 要求为Number类型的参数,设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置. 4.async:
Ajax和$.ajax使用实例详解(推荐)

实例一(Ajax请求基本创建格式): <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>Ajax练习(GET,不考虑浏览器兼容性)</title> <script type="text/JavaScript"> function doRequest() { //不考虑浏览器兼容性问题 var
JavaScript浏览器对象之一Window对象详解

JavaScript提供了一组以window为核心的对象,实现了对浏览器窗口的访问控制.JavaScript中定义了6种重要的对象: window对象表示浏览器中打开的窗口: document对象表示浏览器中加载页面的文档对象: location对象包含了浏览器当前的URL信息: navigation对象包含了浏览器本身的信息: screen对象包含了客户端屏幕及渲染能力的信息: history对象包含了浏览器访问网页的历史信息. 除了window对象之外,其他的5个对象都是windo
基于Vue的ajax公共方法(详解)

为了减少代码的冗余,决定抽离出请求ajax的公共方法,供同事们使用. 我使用了ES6语法,编写了这个方法. /** * @param type 请求类型,分为POST/GET * @param url 请求url * @param contentType * @param headers * @param data * @returns {Promise<any>} */ ajaxData: function (type, url, contentType, headers, data) {
django中的ajax组件教程详解

Ajax(Asynchronous Javascript And XML)翻译成英文就是"异步Javascript和XML".即用Javascript语言与服务器进行异步交互,传输的数据为XML,(现在使用更多的是json数据). 向服务器发送请求的途径 1.浏览器地址栏 http://www.baidu.com 默认是get请求 2.form表单发送请求: GET请求 POST请求 3.a标签 href属性默认是get请求 4.ajax() Ajax的特点异步交互:客户端发送一个
javascript中的糖衣语法Promise对象详解

目录一.Promise的诞生 1.回调地狱二.Promise的行为 1.Promise的语法 2.Promise的方法 (1)Promise.prototype.then() (2)Promise.prototype.catch() (3)Promise.prototype.finally() (4)Promise.resolve() (5)Promise.reject() (6)Promise.all() (7)Promise.race() 三.Promise的场景 1.Ajax请求 2.

AJAX XMLHttpRequest对象详解

相关推荐

随机推荐