导读:AJAX利用一个构建到所有现代浏览器内部的对象-XMLHttpRequest-来实现发送和接收HTTP请求与响应信息。那么,XMLHttpRequest对象是怎么创建和封装的呢?

一、简介

1.1,用途

该对象向服务器发送请求,并接收服务器响应,实现与服务器的异步通信

1.2,发展

在1999年上半年,微软利用ActiveX对象实现了XMLHTTP对象,随后,在2000年,Mozilla实现了相同接口的原生对象XMLHttpRequest对象,Opera,Safari也相继实现。

二、XMLHttpRequest的基本知识

2.1,属性

2.2,状态

2.3,status和statueText

2.4,方法

三、封装XMLHttpRequest对象

3.1,步骤

总结说来,对于XMLHttpRequest对象的封装,有五步:

1,创建一个XMLHttpRequest对象

2,调用对象的Open()方法设置和服务器端交互的基本信息

3,使用对象的onReadystatechange属性注册回调函数,在函数中判断交互是否结束,响应是否正确,并根据需要获取服务器返回的数据,更新页面内容

4,通过对象的setRequestHeader()方法设置相应的请求头(如果交互方式为:POST)

5,调用对象的send()方法发起请求

3.2,封装

<span style="font-family:KaiTi_GB2312;font-size:18px;">/*
封装XMLHTTPRequest对象
*/
var XMLHTTPRequest=function(userName) {
//1,创建XMLHTTPRequest对象
var myXMLHttpRequest;
if (window.XMLHttpRequest) {
//IE7,IE8,Firefox,Mozillar,Safari,Opera
myXMLHttpRequest = new XMLHttpRequest();
//服务器发送回来的头部,不是text/xml,进行忽略
if (myXMLHttpRequest.overrideMineType) {
myXMLHttpRequest.overrideMineType("text/xml");
}
}//IE5,IE6,IE5.5
else if (window.ActiveXObject) {
//创建一个数组,包含所有能用于创建XMLHTTPRequest对象的ActiveXobject控件名称
var activeName = ["XSXML2.XMLHTTP", "Microsoft.XMLHTTP", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.6.0"];
for (var i = 0; i < activeName.length; i++) {
//没有可用的控件,捕捉异常
try {
myXMLHttpRequest = new ActiveXObject(activeName[i]);
break;//创建成功,终止循环
} catch (e) { }
}
}
//对象创建失败
if (myXMLHttpRequest == undefined || myXMLHttpRequest == null) {
alert("当前浏览器不支持创建XMLHTTPRequest对象,请更换浏览器");
return;
}
/*
//GET方式交互
//2,设置和服务器端交互的相应参数,打开资源
myXMLHttpRequest.open("GET", "AJAX?name=" + userName, true);
//3,注册回调函数
myXMLHttpRequest.onreadystatechange = callback;
//4,设置向服务器端发送的数据,启动和服务器端的交互
myXMLHttpRequest.send(null);
*/ //POST方式交互
//2,设置和服务器端交互的相应参数,打开资源
myXMLHttpRequest.open("POST", "AJAX",true);
//3,注册回调函数
myXMLHttpRequest.onreadystatechange = callback;
//4,设置请求头(和GET方式的区别)
myXMLHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//4,设置向服务器端发送的数据,启动和服务器端的交互
myXMLHttpRequest.send("name="+userName); //3.1,实现回调函数
function callback() {
//判断和服务器端的交互是否完成,然后判断服务器端是否正确返回了数据
if (myXMLHttpRequest.readyState == 4) {//和服务器端的交互已经完成
if (myXMLHttpRequest.status == 200) {//服务器的响应代码为200,正确的返回了数据
//纯文本的接收方法,使用前提:服务器端设置content-type为text/xml
var message = myXMLHttpRequest.responseText;
//向div标签中填充文本内容
var div = document.getElementById("message");
div.innerHTML = message;
}
}
}
}
</span>

四、总结

Ajax还有很多需要探索和学习的,比如说例子的实现,我没有实现它,肯定是对于这个知识的掌握还不够,或者说别的关于BS的知识学习的还不够,不能放弃,遇到一个问题就是我的一次机会。还有包括Ajax的封装,还有其跨域问题、缓存问题等,都需要解决。

【Ajax 2】封装Ajax的核心对象:XMLHttpRequest对象的更多相关文章

  1. AJAX编程-封装ajax工具函数

    即 Asynchronous [e'sɪŋkrənəs] Javascript And XML,AJAX 不是一门的新的语言,而是对现有技术的综合利用.本质是在HTTP协议的基础上以异步的方式与服务器 ...

  2. AJAX 核心 —— XMLHTTPRequest 对象回顾

    一.AJAX概述 不使用 AJAX 的网页,如果要更新内容,需要重载整个页面. AJAX ( Asynchronous Javascript And XML ,异步 Javascript 和 XML) ...

  3. Ajax学习(三)——XMLHttpRequest对象的五步使使用方法

        Ajax的核心技术是XMLHttpRequest对象,它能够在不向server提交整个页面的情况下.实现局部更新网页.通过这个对象,Ajax能够像桌面应用程序那样仅仅与server进行数据层的 ...

  4. 使用XMLHttpRequest对象完成原生的AJAX请求

    1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...

  5. AJAX——XMLHttpRequest对象的使用

    AJAX是web2.0即动态网页的基础,而XMLHttpRequest对象又是AJAX的核心.XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据 一. ...

  6. AJAX——理解XMLHttpRequest对象

    AJAX大家已经都知道了,XMLHttpRequest对象则是AJAX的核心.这篇博客重点总结一下这个对象的使用. XMLHttpRequest对象的属性和方法: 属性 说明 readyState 表 ...

  7. jquery与ajax的XMLHttpRequest对象介绍

    首先  认识一个对象 这个对象叫XMLHttpRequest XMLHttpRequest对象可以提供在不刷新页面的情况下向服务器发送异步请求,并且接受服务器端返回的结果.从而实现局部更新当前页面的功 ...

  8. 用js内置对象XMLHttpRequest 来用ajax

    步骤: /* 用XMLHTTPRequest来进行ajax异步数据交交互*/ 主要有几个步骤: //1.创建XMLHTTPRequest对象 //最复杂的一步 if (window.XMLHttpRe ...

  9. 【02】AJAX XMLHttpRequest对象

    AJAX XMLHttpRequest对象   XMLHttpRequest 对象用于与服务器交换数据,能够在不重新加载整个网页(刷新)的情况下,对网页进行部分更新. XMLHttpRequest 对 ...

随机推荐

  1. java中stringBuilder的用法

    java中stringBuilder的用法 String对象是不可改变的.每次使用 System.String类中的方法之一时,都要在内存中创建一个新的字符串对象,这就需要为该新对象分配新的空间.在需 ...

  2. c++正则表达式模板库GRETA的使用

    GRETA是微软研究院的一位前员工开发并开源的一个C++正则表达式库,兼容perl正则语法 官方介绍:“A fast, flexible, perl-compliant regular express ...

  3. vue同胞组件通讯解决方案(以下为一种另外可用vuex解决)

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. swift版本拼图游戏项目源码

    现学现做的第一个swift版本拼图游戏demo 常规模式,对换模式任你选择, 用到了花瓣的API,各种萌妹子~

  5. 记一次mysql优化操作

    这次操作,起因是需要获取用户来源及用户性别,而用户的性别信息在第三方授权的中有,存为JSON格式, 不想用php去解析获取,所以试试mysql操作 如果你有更好的解决方案,请留言告诉我! 情景简化 表 ...

  6. 迅为iMX6UL Cortex-A7架构单核ARM开发板接口介绍-支持定制

    支持商业级和工业级核心板 1. POWER 电源接口电源输入为 5V/2A+,给核心板提供 5V 电源,给底板供电.原理图部分如下图所示. 电源接口位置如下图所示. 2. SWITCH 电源开关轻触电 ...

  7. Architecture:架构 元素与关系

    http://www.iso-architecture.org/42010/cm/ Systems have architectures. In the Standard, the architect ...

  8. 关于JDBC访问存储过程的问题

    最近开发一个应用,需要调用一个入参为List的存储过程. 存储过程为: proc_test(p1 OUT Number, p2 IN Number, p3 IN TAB_CUSTOMER); 这个Li ...

  9. linux下C的建立、编译和运行 gcc (附上Windows下visual c++的用法)

    2019/6/24 1. 环境:window10下安装了MobaXterm,这里申请了阿里云的服务账号,可以直接使用linux系统,避免安装虚拟机等. 2. 判断linux下是否有GCC编译工具(我们 ...

  10. uva11491 Erasing and Winning

    边读入边处理 优化了速度一开始有想错了的地方.处理输入有点想用stringstream, 的问题在于他把字符串连续的数字作为一个整体,遇到空格才分开,所以不适用 #include<cstdio& ...