AJAX的生命历程与风景
2014-08-24 01:51
141 查看
AJAX的介绍与我的认识,风景则是在学习的路上的点点滴滴,学一点,就积累一点!开始!!!(参考W3CSchool)
AJAX( Asynchronous JavaScript and XML(异步的 JavaScript 和 XML))ps:光看英文就知道与XML有关系。。。。
含义:通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
例子:新浪微博、Google 地图、开心网等等.
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.
XMLHttpRequest 对象用于和服务器交换数据。
GET方法
xmlhttp.open("GET","url",true);
xmlhttp.send();
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
send(string)
将请求发送到服务器。
- string:仅用于 POST 请求
POST方法
Post方法使用的时候需要下面这一句话
setRequestHeader(header,value)
向请求添加 HTTP 头。
- header: 规定头的名称
- value: 规定头的值
GET 还是 POST?
属性 描述
responseText 获得字符串形式的响应数据。document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML 获得 XML 形式的响应数据。
XML文件有点费事 (例子很多)
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status
200: "OK"
404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
AJAX( Asynchronous JavaScript and XML(异步的 JavaScript 和 XML))ps:光看英文就知道与XML有关系。。。。
含义:通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
例子:新浪微博、Google 地图、开心网等等.
XMLHttpRequest 对象
所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。
XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.
XMLHttpRequest 对象用于和服务器交换数据。
GET方法
xmlhttp.open("GET","url",true);
xmlhttp.send();
open(method,url,async)
规定请求的类型、URL 以及是否异步处理请求。
- method:请求的类型;GET 或 POST
- url:文件在服务器上的位置
- async:true(异步)或 false(同步)
send(string)
将请求发送到服务器。
- string:仅用于 POST 请求
POST方法
xmlhttp.open("POST","ajax_test.asp",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("fname=Bill&lname=Gates");
Post方法使用的时候需要下面这一句话
setRequestHeader(header,value)
向请求添加 HTTP 头。
- header: 规定头的名称
- value: 规定头的值
与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。
然而,在以下情况中,请使用 POST 请求:
无法使用缓存文件(更新服务器上的文件或数据库)
向服务器发送大量数据(POST 没有数据量限制)
发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
服务器响应属性 描述
responseText 获得字符串形式的响应数据。document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML 获得 XML 形式的响应数据。
XML文件有点费事 (例子很多)
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;
onreadystatechange 事件
当请求被发送到服务器时,我们需要执行一些基于响应的任务。
每当 readyState 改变时,就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。
属性 描述
onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数。
readyState
存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪
status
200: "OK"
404: 未找到页面
在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。
当 readyState 等于 4 且状态为 200 时,表示响应已就绪:
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
相关文章推荐
- 一个C&C++程序的生命历程
- 生命中最美的风景就是曾经遇见了你
- android service生命历程
- C++构造函数种类,对象的生命历程
- 喝茶生命美丽的风景
- 一个MFC程序的生命历程
- 修改asp.net的Ajax变更为post请求的历程
- asp.net ajax学习历程(一)
- 生命的旅途,一程有一程的风景
- Ajax基础教程---1.3 Web应用的发展历程 CGI->applet->JavaScript->flash ->DHTML->AJAX
- iOS-View视图的生命历程
- asp.net ajax学习历程(二)
- 汇编程序.c到a.out的生命历程
- ASP.NET Web 页面生命历程中的一天
- asp.net ajax学习历程(三)
- tomcat源码解读五 Tomcat中Request的生命历程
- JS 面试知识学习历程(第七天) -- 事件、Ajax、存储
- ASP.NET Web 页面生命历程中的一天
- tomcat源码解读六 tomcat中的session生命历程
- 机房收费系统之生命历程