JavaScript学习心得(十)
Ajax
Ajax是浏览器中使用JavaScript进行服务器后台请求,读取附加信息或者导致服务器响应的过程。
Ajax广泛用于从服务器读取数据,并用所得到的数据更新页面,以及向服务器发送数据
Ajax请求执行:
- 创建一个Ajax对象
- 发出请求
- 处理服务器响应
一 基础
创建一个Ajax对象:
function getXMLHttpRequestObject(){
var ajax = null;
if(window.XMLHttpRequest){
ajax = new XMLHttpRequest();
}else if(window.ActiveXObject){//old IE
ajax = new ActiveXObject('MSXML2.XMLHTTP.3.0');
}
return ajax;
}
指定对象的结果处理器(即Ajax事务期间调用的函数),将函数和Ajax调用关联: ajax.onreadystatechange = handleStateChange;
发出请求,调用对象的open()方法,以请求类型作为第一参数,服务器资源URL为第二参数,TRUE为第三参数。
常见的请求类型GET和POST:
- GET请求是请求HTML的标准方法即单击链接时浏览器发出的请求类型,用于获取数据
- POST表单提交的标准方法,用于发起服务器更改或者响应,用于常见而可重复的请求
Ajax请求必须经过服务器发起才能正常工作。
调用send()实际的发出请求:ajax.send(null)
abort()撤销请求。
readyStrate属性有一下五个值,执行顺序如下:
- 0,未发送
- 1,打开
- 2,接收到首标
- 3,加载中
- 4,完成
检查readyState属性并反应,在此之前进行一次检查--确认响应正常,使用status属性(代表服务器对资源请求的相应代码)完成确认:
if(ajax.readyState == 4){
if((ajax.status >= 200 && ajax.status <300) ||(ajax.status==304)){
//handle the response
}else{
//status error
}
}else{
//show the loading message or do nothing
}
HTTP代码:
成功2×× 成功处理了请求的状态码。
200 服务器已成功处理了请求并提供了请求的网页。
204 服务器成功处理了请求,但没有返回任何内容。
重定向3×× 每次请求中使用重定向不要超过 5 次。
301 请求的网页已永久移动到新位置。当URLs发生变化时,使用301代码。搜索引擎索引中保存新的URL。
302 请求的网页临时移动到新位置。搜索引擎索引中保存原来的URL。
304 如果网页自请求者上次请求后没有更新,则用304代码告诉搜索引擎机器人,可节省带宽和开销。
客户端错误4×× 表示请求可能出错,妨碍了服务器的处理。
400 服务器不理解请求的语法。
403 服务器拒绝请求。
404 服务器找不到请求的网页。服务器上不存在的网页经常会返回此代码。
410 请求的资源永久删除后,服务器返回此响应。该代码与 404(未找到)代码相似,但在资源以前存在而现在不存在的情况下,有时用来替代404 代码。如果资源已永久删除,应当使用 301 指定资源的新位置。
服务器错误5×× 表示服务器在处理请求时发生内部错误。这些错误可能是服务器本身的错误,而不是请求出错。
500 服务器遇到错误,无法完成请求。
503 服务器目前无法使用(由于超载或停机维护)。通常,这只是暂时状态。
二 JSON
JavaScript对象标记法(JavaScript‘S Object )。建议使用双引号标记所有属性和值。
在Ajax中,使用JSON:将其解析为JavaScript代码:
- 从Ajax对象获得对象的responseText属性中获取数据 var data = ajax.responseText;
- 转化为JavaScript对象 var data = JSON.parse(data);
JavaScript学习心得(十)的更多相关文章
- WGZX:javaScript 学习心得--2
转贴javascript心得(二) 标签: javascriptajaxweb开发htmlfirefox框架 2008-09-11 10:56 636人阅读 评论(0) 收藏 举报 分类: UI(2 ...
- JavaScript学习总结(十四)——JavaScript编写类的扩展方法
在JavaScript中可以使用类的prototype属性来扩展类的属性和方法,在实际开发当中,当JavaScript内置的那些类所提供的动态 ...
- WGZX:javaScript 学习心得--1
标签: javascriptiframedreamweaver浏览器htmltable 2008-09-11 10:50 1071人阅读 评论(0) 收藏 举报 分类: UI(21) 1,docu ...
- JavaScript学习总结(十六)——Javascript闭包(Closure)
原文地址: http://www.cnblogs.com/xdp-gacl/p/3703876.html 闭包(closure)是Javascript语言的一个难点,也是它的特色, 很多高级应用都要依 ...
- JavaScript学习心得
javaScript十分的强大,所以自然而然学起来也是不易的,想要掌握它的核心,把它理解透更是不易的,但只要你能够静下心来,耐心的去钻研,学习,还是可以把它给学好的,加油吧! 下面是一些JavaScr ...
- JavaScript学习笔记(十二) 回调模式(Callback Pattern)
函数就是对象,所以他们可以作为一个参数传递给其它函数: 当你将introduceBugs()作为一个参数传递给writeCode(),然后在某个时间点,writeCode()有可能执行(调用)intr ...
- JavaScript学习心得(八)
Cookie是Netscape发明的技术,是动态网站必不可少的部分,用于浏览器请求Web页面的超文本传输协议是一种无状态的协议. 两种方法维护状态:使用会话(session)(使用服务器技术实现,数据 ...
- JavaScript学习心得(七)
一 创建事件监听器 开发人员往往使用事件和元素组合来命名事件处理函数. 创建事件监听器方法: 嵌入式事件处理器即将JavaScript函数赋值给HTML元素属性(不推荐使用:污染HTML:无法应用渐进 ...
- JavaScript学习心得(六)
函数 对函数参数没有任何类型检查(弱类型),在必要时在函数内加上类型检查(typeof): JavaScript的函数参数无法设置默认值(可以通过检查参数,当为undefined时设置一个值 func ...
随机推荐
- Linux常用命令及vim的使用、vim常用插件(推荐)
看了3篇文章,很好 vim中的区域拷贝 剪切,粘贴: 正常模式,移动光标到剪切的区域开始处,按v,进入可视模式,然后选择区域.按x键,剪切.到指定位置按p粘贴. 撤销按u 恢复按ctrl-r 简明 ...
- 【LeetCode】Binary Tree Level Order Traversal II
Given a binary tree, return the bottom-up level order traversal of its nodes' values. (ie, from left ...
- Linux定时任务编写
由于需要定时备份数据库 我就在crontab -e中编写了这样的代码 十分钟备份一次 命名方式为年月日-时分秒.sql */10 * * * * /usr/bin/mysqldump -u root ...
- PAT---1013. Battle Over Cities (25)
这道题目的意思是:在战争时代,如果一个城市被敌人占领了,那么和该城市相连的道路都必须关闭,我们必须把剩下的城市(即不包括被敌人占领的城市)连接起来. 举个例子,我们有3个城市,C1,C2,C3,C1和 ...
- LabVIEW设计模式系列——事件结构中值改变事件
标准:1.将具有值改变事件的控件,放置在其事件结构的值改变页面里.
- 动态树 Link-Cut Trees
动态树 动态树问题, 即要求我们维护一个由若干棵子结点无序的有根树组成的森林. 要求这个数据结构支持对树的分割.合并,对某个点到它的根的路径的某些操作,以及对某个点的子树进行的某些操作. 在这里我们考 ...
- enableEventValidation
回发或回调参数无效.在配置中使用 <pages enableEventValidation="true"/> 或在页面中使用 <%@ Page EnableEve ...
- wget 使用技巧
wget 是一个命令行的下载工具.对于我们这些 Linux 用户来说,几乎每天都在使用它.下面为大家介绍几个有用的 wget 小技巧,可以让你更加高效而灵活的使用 wget. $ wget -r -n ...
- yieId浅谈
例子:在不使用yieId时,通常我们都会采取先遍历再把元素加到新的List中 using (var reader = SqlHelper.ExecuteReader("")) { ...
- delphi参数传递
delphi参数传递 参数传递 声明/实现一个过程使用的参数称为形式参数(简称形参),调用过程时传入的参数称为实际参数(简称实参). { Info是形参} procedure ShowInfo( ...