javascript学习笔记(七)Ajax和Http状态码


Posted in Javascript onOctober 08, 2014

Ajax及其工作原理

AJAX 是一种与服务器交换数据无需刷新网页的技术,最早由Google公司在谷歌地图里使用,并迅速风靡。

AJAX是不能跨域的,如需跨域,可以使用document.domain='a.com';或者使用服务器代理,代理XMLHttpRequest文件

AJAX是基于现有的Internet标准,并且联合使用它们:

XMLHttpRequest 对象 (异步的与服务器交换数据)
JavaScript/DOM (信息显示/交互)
CSS (给数据定义样式)
XML (作为转换数据的格式)

javascript学习笔记(七)Ajax和Http状态码

创建 XMLHttpRequest 对象

所有现代浏览器(IE7+、Firefox、Chrome、Safari 以及 Opera)均内建 XMLHttpRequest 对象。

创建Ajax对象:

//IE6以上
var oAjax = new XMLHttpRequest();

//IE6
var oAjax =new ActiveXObject("Microsoft.XMLHTTP")
连接服务器

oAjax.open(方法,url,是否异步)
我们都知道,Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术。所以,Ajax天生就是工作在异步模式的(异步为true,同步false)

同步和异步

同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯方式。
(简单点说:同步就是只能一件一件事的来做,而异步就是可以多件事同时进行)

发送请求send()

<script type="text/javascript">

function getDoc(){

    var xmlhttp;

    if(window.xmlhttpRequest){

        xmlhttp=new XMLHttpRequest();

    }

    else{

        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//for IE6

    }

    xmlhttp.onreadystatechange = function(){

        if(xmlhttp.readyState==4&&xmlhttp.status==200){

            document.getElementById("myId").innerHTML=xmlhttp.responseText;

        }

    }

    xmlhttp.open("GET", index.php,true);

    xmlhttp.send();

}

</script>

</head>

<body>

    <button type="button" onclick="getDoc()">请求数据</button>

</body>

GET 还是 POST?

与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

然而,在以下情况中,请使用 POST 请求:

无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
接收返回信息

oAjax.onreadystatechange = function(){   //当请求状态改变时要调用的事件处理器

    alert(oAjax.readystate);          

}
只要readyState属性的值发生变化时,便会触发一次readyStatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。通常,我们只对readyState值为4的阶段感兴趣,因为这时所有数据都已经就绪,不过,必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。下面来看一个例子:

var xhr = createXHR();

xhr.onreadystatechange = function () {

    if (xhr.readyState == 4) {

        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {

            alert(xhr.statusText);

        } else {

            alert("Request was unsuccessful: " + xhr.status);

        }

    }

};

xhr.open("get", "example.txt", true);

xhr.send(null);

XHR对象

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

0(未初始化)还没有调用open()方法
1(载入)已调用send()方法,正在发送请求
2(载入完成)send()方法完成,已收到全部响应内容
3(解析)正在解析响应内容
4(完成)响应内容解析完成,可以再客户端使用了
status

status属性表示从服务器返回的响应状态码。例如:200表示成功,404表示未找到。

1字头:消息。这一类型的状态码,代表请求已被接受,需要继续处理。
2字头:成功。这一类型的状态码,代表请求已成功被服务器接收、理解、并接受。
3字头:重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。
4字头:客户端错误。这类状态码代表了客户端看起来可能发生错误,妨碍了服务器的处理。
5字头:服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生

另附:http状态码详解

statusText

statusText是响应返回的文本信息,仅当readyState值为3或4的时候才能使用。当readyState为其它值时视图存取statusText属性将引发异常。

XHR的方法

方法 描述
abort() 导致当前正在执行的请求被取消
getAllResponseHeaders() 返回包含所有响应头的名称和值的单个字符|串
getResponseHeader(name) 返回响应头中指定的名称和值
open(method,url,async,username,pwd) 设置HTTP方法(get或post)等
send(content) 发出带有指定主体内容的请求
setRequestHeader(name,value) 使用指定的名称和值设置请求头
<script type="text/javascript">

        var oAjax =oAjax();

        alert(oAjax.readyState);//弹出"0"

        oAjax.open("get","index.html",true);

        alert(oAjax.readyState);//弹出"1"

        oAjax.send(null);

        alert(oAjax.readyState);//IE下弹出4,而firefox是2

        //可以通过readystatechange事件监听

        oAjax = XHR();

        oAjax.onreadystatechange = function () {

            alert(oAjax.readyState);//Firefox下依次是1,2,3,4但最后还会再来个1

            //IE下则是1,1,3,4

        };

        oAjax.open("get","index.txt",true);

        oAjax.send(null);

</script>
Javascript 相关文章推荐
jQuery EasyUI API 中文文档 搜索框
Sep 29 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
Aug 18 Javascript
javascript实现简单加载随机色方块
Dec 25 Javascript
详细谈谈javascript的对象
Jul 31 Javascript
es6的数字处理的方法(5个)
Mar 16 Javascript
jQuery滑动到底部加载下一页数据的实例代码
May 22 jQuery
vue数据控制视图源码解析
Mar 28 Javascript
Vue 实现一个命令式弹窗组件功能
Sep 25 Javascript
jquery传参及获取方式(两种方式)
Feb 13 jQuery
vue项目查看vue版本及cli版本的实现方式
Oct 24 Javascript
JavaScript实现手风琴效果
Feb 18 Javascript
JavaScript架构搭建前端监控如何采集异常数据
Jun 25 Javascript
javascript学习笔记(六)数据类型和JSON格式
Oct 08 #Javascript
javascript学习笔记(五)原型和原型链详解
Oct 08 #Javascript
JavaScript中获取高度和宽度函数总结
Oct 08 #Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 #Javascript
JavaScript中获取样式的原生方法小结
Oct 08 #Javascript
吐槽一下我所了解的Node.js
Oct 08 #Javascript
Node.js 的异步 IO 性能探讨
Oct 08 #Javascript
You might like
php中文件上传的安全问题
2006/10/09 PHP
SWFUpload与CI不能正确上传识别文件MIME类型解决方法分享
2011/04/18 PHP
PHP中获取变量的变量名的一段代码的bug分析
2011/07/07 PHP
php计算两个坐标(经度,纬度)之间距离的方法
2015/04/17 PHP
Laravel执行migrate命令提示:No such file or directory的解决方法
2016/03/16 PHP
php实现文件预览功能
2017/05/23 PHP
JS中showModalDialog 的使用解析
2013/04/17 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
Javascript堆排序算法详解
2014/12/03 Javascript
jQuery对象初始化的传参方式
2015/02/26 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
2015/03/02 Javascript
jquery合并表格中相同文本的相邻单元格
2015/07/17 Javascript
HTML中setCapture、releaseCapture 使用方法浅析
2016/09/25 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
JS操作input标签属性checkbox全选的实现代码
2017/03/02 Javascript
Koa2 之文件上传下载的示例代码
2018/03/29 Javascript
微信小程序自定义模态弹窗组件详解
2019/12/24 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
详解如何使用React Hooks请求数据并渲染
2020/10/18 Javascript
原生js实现下拉框选择组件
2021/01/20 Javascript
Vue-router编程式导航的两种实现代码
2021/03/04 Vue.js
[04:04]DOTA2亚洲邀请赛比赛场馆&酒店全攻略
2017/03/23 DOTA
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
windows下python安装paramiko模块和pycrypto模块(简单三步)
2017/07/06 Python
Python numpy实现二维数组和一维数组拼接的方法
2018/06/05 Python
python pygame实现方向键控制小球
2019/05/17 Python
python如何实时获取tcpdump输出
2020/09/16 Python
HTML5视频支持检测(检查浏览器是否支持视频播放)
2013/06/08 HTML / CSS
物业管理专业个人的自我评价
2013/11/19 职场文书
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
校园歌咏比赛主持词
2014/03/18 职场文书
毕业留言寄语大全
2014/04/10 职场文书
软件售后服务承诺书
2014/05/21 职场文书
支部组织生活会方案
2014/06/10 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python