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 相关文章推荐
简单通用的JS滑动门代码
Dec 19 Javascript
JavaScript setTimeout和setInterval的使用方法 说明
Mar 25 Javascript
基于JQuery的日期联动实现代码
Feb 24 Javascript
各浏览器对click方法的支持差异小结
Jul 31 Javascript
jQuery制作可自定义大小的拼图游戏
Mar 30 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
JavaScipt中栈的实现方法
Feb 17 Javascript
JavaScript基础语法之js表达式
Jun 07 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
May 29 Javascript
JavaScript字符和ASCII实现互相转换
Jun 03 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获取网络文件的实现代码
2010/01/01 PHP
php set_time_limit(0) 设置程序执行时间的函数
2010/05/26 PHP
php 抽象类的简单应用
2011/09/06 PHP
PHP pthreads v3下同步处理synchronized用法示例
2020/02/21 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
Mootools 1.2教程(2) DOM选择器
2009/09/14 Javascript
Mootools 1.2教程 滚动条(Slider)
2009/09/15 Javascript
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
Javascript window对象详解
2014/11/12 Javascript
简介JavaScript中Math.LOG10E属性的使用
2015/06/14 Javascript
jQuery切换所有复选框选中状态的方法
2015/07/02 Javascript
关于javascript原型的修改与重写(覆盖)差别详解
2016/08/31 Javascript
js从数组中删除指定值(不是指定位置)的元素实现代码
2016/09/13 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
Bootstrap免费字体和图标网站(值得收藏)
2017/03/16 Javascript
原生js实现拖拽移动与缩放效果
2020/08/24 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
[02:59]DOTA2完美大师赛主赛事第三日精彩集锦
2017/11/25 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
零基础写python爬虫之爬虫编写全记录
2014/11/06 Python
python3.5实现socket通讯示例(TCP)
2017/02/07 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
美的官方商城:Midea
2016/09/14 全球购物
SkinCeuticals官网:美国药妆品牌
2018/04/19 全球购物
Elizabeth Gage官网:英国最好的珠宝设计之一
2020/09/26 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
会计专业自荐书
2014/07/08 职场文书
大四优秀党员个人民主评议
2014/09/19 职场文书
商超业务员岗位职责
2015/02/13 职场文书
销售合作意向书范本
2015/05/08 职场文书
2015年校医个人工作总结
2015/07/24 职场文书
文艺委员竞选稿
2015/11/19 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
java设计模式--建造者模式详解
2021/07/21 Java/Android
聊聊redis-dump工具安装问题
2022/01/18 Redis