浅析ajax

objc94 发布于2019-08-19 17:57 / 1470人阅读

摘要：如果响应的内容类型是或，这个属性将保存包含着响应数据的文档。响应的状态状态的说明当对象把一个请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。

1.什么是Ajax

Ajax：是Asynchronous Javascript And XML的简写，即异步JavaScript和XML
用途：动态刷新局部数据，无需卸载整个页面，从而带来更好的用户体验
Ajax核心：XMLHttpRequest对象(简称XHR)

2.如何创建XHR对象

以下是一个跨浏览器创建XHR对象的函数:

function createXHR() {  
        if (typeof XMLHttpRequest !== "undefined") {  
            return new XMLHttpRequest();
        }else if{
            if (typeof ActiveXString != "undefined") {  
                    var versions = [ "MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp" ];  
                    for ( var i = 0, len = versions.length; i < len; i++) {  
                        try {  
                            var xhr = new ActiveXObject(versions[i]);  
                            arguments.callee.activeXString = versions[i];  
                            break;  
                        } catch (error) {  
                            // ...  
                        }  
                    }  
                }
                return new ActiveXObject(arguments.callee.activeXString);
        }else {
            throw new Error("No XHR object avaliable.");
        }
    }

XMLHttpRequest这个对象的属性：

responseText 作为响应主体返回的文本。

responseXML 如果响应的内容类型是"text/xml"或"application/xml"，这个属性将保存包含着响应数据的xml DOM文档。

status 响应的http状态

statusText http状态的说明

当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。readyState是XHR请求的状态属性，它本身有5个属性值：

0（未初始化）还没有调用open()方法

1（启动）已调用send()方法，正在发送请求

2(发送)send()方法完成，已收到全部响应内容

3(接收)已经接收到部分响应内容

4（完成）响应内容解析完成，可以再客户端使用了

3.实现Ajax的步骤

A.创建一个XHR对象

var xhr= createXHR();

B.设置响应HTTP请求状态变化的函数

xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;//刷新了xxx中的数据
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};

C.创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及表示是否异步发送请求的布尔值

xhr.open("get","getAjaxData.php",true);//true表示异步发送请求

D.设置自定义请求头部(可选)

xhr.setRequestHeader("myHeader","myValue");//jsonp跨域请求时会用到自定义的头部

E.发送http请求

xhr.send(null);//作为请求主体发送的数据，无数据必须传入null，post请求时经常会发送数据

完整代码如下：

var xhr= createXHR();
xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};
xhr.open("get","getAjaxData.php",true);
xhr.setRequestHeader("myHeader","myValue");
xhr.send(null);

GPU云服务器云服务器源码浅析 cdn浅析 jdbc连接mysql数据库的方法浅析 ajax()

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79028.html

切图崽的自我修养－[HTTP] Http Proxy浅析

摘要：前言它是一个中介代理服务器是网络的中间实体。代理位于客户端和服务器之间，扮演中间人的角色。前言它是一个中介 Web代理(proxy)服务器是网络的中间实体。代理位于Web客户端和Web服务器之间，扮演中间人的角色。HTTP的代理服务器即是Web服务器又是Web客户端 Proxy代理软件 mac常用的proxy软件有Charles proxy软件只能映射你浏览器的请求的host ...

heartFollower 2019-08-20 11:27 评论0 收藏0
切图崽的自我修养－[HTTP] Http Proxy浅析

摘要：前言它是一个中介代理服务器是网络的中间实体。代理位于客户端和服务器之间，扮演中间人的角色。前言它是一个中介 Web代理(proxy)服务器是网络的中间实体。代理位于Web客户端和Web服务器之间，扮演中间人的角色。HTTP的代理服务器即是Web服务器又是Web客户端 Proxy代理软件 mac常用的proxy软件有Charles proxy软件只能映射你浏览器的请求的host ...

RayKr 2019-08-01 15:48 评论0 收藏0
浅析jQuery整体框架与实现（上）

摘要：通常的做法是，为它们指定回调函数。请求返回请求返回请求返回异步队列解耦异步任务和回调函数为模块队列模块事件提供基础功能。前言 jQuery整体框架甚是复杂，也不易读懂，这几日一直在研究这个笨重而强大的框架。jQuery的总体架构可以分为：入口模块、底层模块和功能模块。这里，我们以jquery-1.7.1为例进行分析。 jquery的总体架构 16 (function( window,...

VEIGHTZ 2019-08-21 10:20 评论0 收藏0
CAS 5.2.x 单点登录 - 实现原理及源码浅析

摘要：上一篇文章简单介绍了在本地开发环境中搭建服务端和客户端，对单点登录过程有了一个直观的认识之后，本篇将探讨单点登录的实现原理。因此引入服务端作为用户信息鉴别和传递中介，达到单点登录的效果。为该流程的实现类。表示对返回结果的处理。上一篇文章简单介绍了 CAS 5.2.2 在本地开发环境中搭建服务端和客户端，对单点登录过程有了一个直观的认识之后，本篇将探讨 CAS 单点登录的实现原理。一...

elisa.yang 2019-08-16 11:07 评论0 收藏0
浅析 web 前端 MVVM

摘要：它由微软架构师和开发，通过利用微软图形系统和的互联网应用派生品的特性来简化用户界面的事件驱动程序设计。微软的和架构师之一于年在他的博客上发表了。更改时会得到提醒这个情况是一个单向流。前言记得四个月前有一次面试，面试官问我 MVVM 是什么，MVVM 的本质是什么。我大脑一片混乱，那时我对 MVVM 的认知就只是双向绑定和Vue，以这个关键字简单回答了几句，我反问 MVVM 的本质是...

VincentFF 2019-08-23 14:35 评论0 收藏0