美文网首页
ajax原理

ajax原理

作者: shougg22 | 来源:发表于2018-08-01 00:58 被阅读0次

XMLHttpRequest是ajax的核心机制,它是在IE5中首先引入的,是一种支持异步请求的技术。简单的说,也就是javascript可以及时向服务器提出请求和处理响应,而不阻塞用户。达到无刷新的效果。
所以我们先从XMLHttpRequest讲起,来看看它的工作原理。
首先,我们先来看看XMLHttpRequest这个对象的属性。
它的属性有:
onreadystatechange 每次状态改变所触发事件的事件处理程序。
responseText 从服务器进程返回数据的字符串形式。
responseXML 从服务器进程返回的DOM兼容的文档数据对象。
status 从服务器返回的数字代码,比如常见的404(未找到)和200(已就绪)
status Text 伴随状态码的字符串信息
readyState 对象状态值
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseXml和responseText获取完整的回应数据

function CreateXmlHttp() {

    //非IE浏览器创建XmlHttpRequest对象
    if (window.XmlHttpRequest) {
        xmlhttp = new XmlHttpRequest();
    }

    //IE浏览器创建XmlHttpRequest对象
    if (window.ActiveXObject) {
        try {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e) {
            try {
                xmlhttp = new ActiveXObject("msxml2.XMLHTTP");
            }
            catch (ex) { }
        }
    }
}

function Ustbwuyi() {

    var data = document.getElementById("username").value;
    CreateXmlHttp();
    if (!xmlhttp) {
        alert("创建xmlhttp对象异常!");
        return false;
    }

    xmlhttp.open("POST", url, false);

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4) {
            document.getElementById("user1").innerHTML = "数据正在加载...";
            if (xmlhttp.status == 200) {
                document.write(xmlhttp.responseText);
            }
        }
    }
    xmlhttp.send();
}

相关文章

  • JavaScript面试题(一)

    一、ajax原理是什么?ajax如何实现跨域?原理及过程? Q1:Ajax的工作原理:通过XmlHttpReque...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 深入理解ajax

    深入理解Ajax ajax的工作原理: ajax的工作原理相当于在用户和服务器之间加了一个中间层(ajax引擎),...

  • 2018-12-03 ajax原理及实现方式

    Ajax工作原理及实例 1、关于ajax的名字 ajax 的全称是Asynchronous JavaScript ...

  • ajax

    替换 ajax的原理 XMLHttpRequest 是ajax的核心 GET POST ajax状态码 HTTP状...

  • 2019-01-19

    Ajax原理一篇就够了 一、什么是Ajax Ajax(Asynchronous JavaScript and XM...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • AJAX异步请求的原理和过程

    Ajax的原理 AJAX指的是异步的JavaScript及XML(Asynchronous JavaScript ...

  • Ajax的优缺点及工作原理?

    Ajax的优缺点及工作原理? 定义和用法: AJAX = Asynchronous JavaScript and ...

  • Ajax最全Resful中@PathVariable占位使用,前

    图解Ajax工作原理 Ajax指Asynchronous JavaScript and XML(异步的 JavaS...

网友评论

      本文标题:ajax原理

      本文链接:https://www.haomeiwen.com/subject/vfakvftx.html