原始XMLHttpRequest方法详情回顾

用一个典型的登录验证的例子来演示吧

一般来说,使用XMLHttpRequest对象来进行登陆验证要经过以下这几个步骤

1.使用DOM方式获得输入框中的值         


代码如下:

var userName = document.getElementById("userName").value;

2.创建XMLHttpRequest对象,这一步比较复杂,主要原因是要考虑浏览器的兼容性问题。      


代码如下:

if (window.XMLHttpRequest) {
        //针对FireFox,Mozillar,Opera,Safari,IE7,IE8
        xmlhttp = new XMLHttpRequest();
        //针对某些特定版本的mozillar浏览器的BUG进行修正
        if (xmlhttp.overrideMimeType) {
            xmlhttp.overrideMimeType("text/xml");
        }
    } else if (window.ActiveXObject) {
         //针对IE6,IE5.5,IE5
        //两个可以用于创建XMLHTTPRequest对象的控件名称,保存在一个js的数组中
        //排在前面的版本较新
        var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
        for (var i = 0; i < activexName.length; i++) {
            try{
                //取出一个控件名进行创建,如果创建成功就终止循环
                //如果创建失败,回抛出异常,然后可以继续循环,继续尝试创建
                xmlhttp = new ActiveXObject(activexName[i]);
                break;
            } catch(e){
            }
        }
    }

3.注册XMLHttpRequest对象的回调函数,注册回调函数时,之需要函数名,不要加括号。    


代码如下:

//注册回调函数时,之需要函数名,不要加括号
    //我们需要将函数名注册,如果加上括号,就会把函数的返回值注册上,这是错误的
    xmlhttp.onreadystatechange = callback;

4.设置( GET )连接信息     


代码如下:

//第一个参数表示http的请求方式,支持所有http的请求方式,主要使用get和post
//第二个参数表示请求的url地址,get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互,true表示异步
xmlhttp.open("GET","AJAXServer?name="+ userName,true);

5.发送请求 


代码如下:

xmlhttp.send(null);

6.(POST)方式,需要自己设置http的请求头,并且由于要进行编码,所以不能直接在XHR.open的第二个参数中将数据发过去,而应该用send()方法将数据传送过去


代码如下:

//POST方式请求的代码
//xmlhttp.open("POST","AJAXServer",true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name=" + userName);

回调函数:


代码如下:

//回调函数
function callback() {
    //alert(xmlhttp.readyState);
    //5。接收响应数据
    //判断对象的状态是交互完成
    if (xmlhttp.readyState == 4) {
        //判断http的交互是否成功
        if (xmlhttp.status == 200) {
            //获取服务漆器端返回的数据
            //获取服务器段输出的纯文本数据
            var responseText = xmlhttp.responseText;
            //将数据显示在页面上
            //通过dom的方式找到div标签所对应的元素节点
            var divNode = document.getElementById("result");
            //设置元素节点中的html内容
            divNode.innerHTML = responseText;
        } else {
            alert("出错了!!!");
        }
    }
}

(0)

相关推荐

  • XMLHttpRequest处理xml格式的返回数据(示例代码)

    示例代码: 复制代码 代码如下: //回调函数function callback() {    //alert(xmlhttp.readyState);    //5.接收响应数据    //判断对象的状态是交互完成    if (xmlhttp.readyState == 4) {        //判断http的交互是否成功        if (xmlhttp.status == 200) {            //使用responseXML的方式来接收XML数据对象的DOM对象   

  • 浅析XMLHttpRequest的缓存问题

    在使用XMLHttpRequest中有没有遇到过,第一次使用是好的,刷新一下就不行了,清空一下缓存再刷新又好了. 这是在使用XMLHttpRequest中常遇到的一个问题,在有的时候XMLHttpRequest请求的结果会缓存在同一个URL中,如果你请求之后的响应不同,就会产生一些莫名其妙的问题,当然也包括文章一开始那个呵呵. 解决方法:知道了原理就简单了,也就是每次请求的URL不同,让它每次都去服务器端请求,而不是使用缓存.下面有两种自己常用的方法: 第一种方法是加时间戳var url = B

  • AJAX(XMLHttpRequest.status)状态码

    下面是Jquery中AJAX参数详细列表: 参数名 类型 描述 url String (默认: 当前页地址) 发送请求的地址. type String (默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET".注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持. timeout Number 设置请求超时时间(毫秒).此设置将覆盖全局设置. async

  • AJAX在不同浏览器中XMLHttpRequest对象的生成示例

    复制代码 代码如下: <script type="text/javascript"> function ajax() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp=new ActiveXObject("Msxml2.XMLHTTP"); }

  • 原始XMLHttpRequest方法详情回顾

    用一个典型的登录验证的例子来演示吧 一般来说,使用XMLHttpRequest对象来进行登陆验证要经过以下这几个步骤 1.使用DOM方式获得输入框中的值          复制代码 代码如下: var userName = document.getElementById("userName").value; 2.创建XMLHttpRequest对象,这一步比较复杂,主要原因是要考虑浏览器的兼容性问题.       复制代码 代码如下: if (window.XMLHttpRequest

  • 在JavaScript实例对象中改写原型方法详情

    目录 在JavaScript中,我们通常可以像下面的代码这样来简单地定义一个类: var sample = function() { // constructor code here } sample.prototype.func1 = function() { // func1 code here } sample.prototype.func2 = function() { // func2 code here } /* more sample prototype functions her

  • Go语言中的字符串拼接方法详情

    目录 1.string类型 2.strings包 2.1 strings.Builder类型 2.2 strings.Reader类型 3.bytes.Buffer 3.1 bytes.Buffer:写数据 3.2 bytes.Buffer:读数据 4.字符串拼接 4.1 直接相加 4.2strings.Builder 4.3 strings.Join() 4.4 bytes.Buffer 4.5 append方法 4.6 fmt.Sprintf 5.字符串拼接性能测试 1.string类型 s

  • Golang通脉方法详情

    目录 方法和接收者 指针类型的接收者 值类型的接收者 方法和函数 任意类型添加方法 方法继承 方法重写 结构体和方法补充 方法和接收者 Go语言中的方法(Method)是一种作用于特定类型变量的函数.这种特定类型变量叫做接收者(Receiver).接收者的概念就类似于其他语言中的this或者 self. Go 语言中同时有函数和方法.一个方法就是一个包含了接受者的函数,接受者可以是命名类型或者结构体类型的一个值或者是一个指针.所有给定类型的方法属于该类型的方法集 方法只是一个函数,它带有一个特殊

  • Vue中使用 class 类样式的方法详情

    在vue中为我们提供了 几种方式来使用class类的样式 1. 布尔值 我们先正常在 style 标签中 书写一个类名为 active的样式 <style> .active{ color: red; font-size: 20px; font-style: normal; } </style> 在我们的 script 标签中创建一个 vm 实例,在实例的 data 数据中心写上 isActive:true , true 表示使用此样式,false 则表示不使用 <script

  • python中__init__()方法详情

    目录 python类中定义的函数称为方法, init ()方法本质也是一个函数.这个函数的作用是初始化实例后的对象. 具体如下例: init()方法的作用是初始化实例后的对象cqueue. class CQueue: 类中的函数称为方法 ,这里的__init__()方法在类实例化是被自动调用.若类定义了__init__()方法,类的实例化操作会自动调用__init__方法. __init__方法可以有参数,参数通过__init__()传递到类的实例化操作上.self代表的是类的实例,而非类. 类

  • vue中Promise的使用方法详情

    目录 一.使用 1.promise是一种异步解决方案 2.asyncawait 简介: promise是什么,它可以说是异步编程的一种解决方法,就拿传统的ajax发请求来说,单个还好,如果是一个请求回来的数据还要被其他请求调用,不断地嵌套,可想而知,代码看起来是很乱的,promise主要是为了解决这种情景而出现的. 一.使用 1.promise是一种异步解决方案 由于ajax异步方式请求数据时,我们不能知道数据具体回来的事件,所以过去只能将一个callback函数传递给ajax封装的方法,当aj

  • C++自定义数据类型方法详情

    目录 1.typedef声明 2.枚举类型enum 1.typedef声明 typedef用于给已有的类型一个新的名字,这个新的名字可以是自己定义的, 其语法为: typedef 现有类型 多个新的类型名称 中现有类型应该是已经定义好的类型,多个新的类型名称表示可以把这个现有的类型多个新的名字,比如下面给int类型两个新的名字,分别为IntDataX和IntDataY,并使用新的名字定义变量x和y: typedef int IntDataX, IntDataY; IntDataX x = 10;

  • Vue插件使用方法详情分享

    目录 一.应用场景 二.使用方法 1.使用自定义插件 2.使用第三方插件[elementUI] 一.应用场景 为vue添加全局功能,比如添加全局的方法和属性.混入全局组件.添加全局资源(指令.过滤器.过渡等).添加第三方的类库(element-ui等) 二.使用方法 1.使用自定义插件 <1>.创建js文件 export default {     install(Vue) {                  // 自定义全局过滤器(截取前四位A)         Vue.filter('m

  • Golang通脉之方法详情

    目录 方法和接收者 指针类型的接收者 值类型的接收者 方法和函数 任意类型添加方法 方法继承 方法重写 结构体和方法补充 方法和接收者 Go语言中的方法(Method)是一种作用于特定类型变量的函数.这种特定类型变量叫做接收者(Receiver).接收者的概念就类似于其他语言中的this或者 self. Go 语言中同时有函数和方法.一个方法就是一个包含了接受者的函数,接受者可以是命名类型或者结构体类型的一个值或者是一个指针.所有给定类型的方法属于该类型的方法集 方法只是一个函数,它带有一个特殊

随机推荐