伍、ajax

一、ajax的概念

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。

1.ajax的优点：

a.减轻服务器的负担、加快浏览速度。

b.带来更好的用户体验。

c.基于标准化并被广泛支持的技术，不需要下载插件或小程序。

d.进一步促成页面呈现与数据分离。

2、ajax的组成部分：

有4种技术组成的集合。其中XmlHttpRequest对象是核心。

a.javascript：通用的脚本语言，用来嵌入某种应用之中，ajax应用程序是使用js编写的。

b.css：web页面可视化样式元素，ajax中用户界面的修改。

c.DOM：通过js修改dom，或者局部更新某个节点。

d.XmlHttpRequest对象：允许web程序员从服务器以后台的方式获取数据。数据的格式通常是文本和xml。

二、ajax异步交互

概念：不太严谨的说，就是一个简单的多线程，用户可以同时进行多项操作而不间断，ajax异步交互在后台完成工作，呈献给用户一个无刷新的页面。

1、异步对象连接服务器

2、DET和POST模式

a.GET请求：直接将数据放到异步请求的URL地址中，send（）方法不发送任何数据；

b.POST请求：将数据统一在send（）方法中发送，请求地址没有任何信息，并且必须要设置请求头部。

<body>
<h2>输入姓名和生日</h2>
<form>
<input type="text" id="firstName" /><br>
<input type="text" id="birthday" />
</form>
<form>
<input type="button" value="GET" onclick="doRequestUsingGET();" /><br>
<input type="button" value="POST" onclick="doRequestUsingPOST();" />
</form>
<div id="serverResponse"></div>
</body>

3、服务器返回xml

xml可扩展标记语言，用来创建自定义标记语言，主要功能是数据的存储。

<html>
<head>
<title>responseXML</title>
<style>

</style>
<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function getXML(addressXML){
var url = addressXML + "?timestamp=" + new Date();
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",url);
xmlHttp.send(null);
}
function addTableRow(sName, sClass, sBirth, sConstell, sMobile){
//表格添加一行的相关操作，可参看7.2.1节
var oTable = document.getElementById("member");
var oTr = oTable.insertRow(oTable.rows.length);
var aText = new Array();
aText[0] = document.createTextNode(sName);
aText[1] = document.createTextNode(sClass);
aText[2] = document.createTextNode(sBirth);
aText[3] = document.createTextNode(sConstell);
aText[4] = document.createTextNode(sMobile);
for(var i=0;i<aText.length;i++){
var oTd = oTr.insertCell(i);
oTd.appendChild(aText[i]);
}
}
function DrawTable(myXML){
//用DOM方法操作XML文档
var oMembers = myXML.getElementsByTagName("member");
var oMember = "", sName = "", sClass = "", sBirth = "", sConstell = "", sMobile = "";
for(var i=0;i<oMembers.length;i++){
oMember = oMembers[i];
sName = oMember.getElementsByTagName("name")[0].firstChild.nodeValue;
sClass = oMember.getElementsByTagName("class")[0].firstChild.nodeValue;
sBirth = oMember.getElementsByTagName("birth")[0].firstChild.nodeValue;
sConstell = oMember.getElementsByTagName("constell")[0].firstChild.nodeValue;
sMobile = oMember.getElementsByTagName("mobile")[0].firstChild.nodeValue;
//添加一行
addTableRow(sName, sClass, sBirth, sConstell, sMobile);
}
}
function handleStateChange(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)
DrawTable(xmlHttp.responseXML); //responseXML获取到XML文档
}
</script>
</head>

<body>
<input type="button" value="获取XML" onclick="getXML('9-4.xml');"><br><br>
<table class="datalist" summary="list of members in EE Studay" id="member">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
</table>
</body>
</html>

<?xml version="1.0" encoding="gb2312"?>
<list>
<caption>Member List</caption>
<member>
<name>isaac</name>
<class>W13</class>
<birth>Jun 24th</birth>
<constell>Cancer</constell>
<mobile>1118159</mobile>
</member>
<member>
<name>fresheggs</name>
<class>W610</class>
<birth>Nov 5th</birth>
<constell>Scorpio</constell>
<mobile>1038818</mobile>
</member>
<member>
<name>girlwing</name>
<class>W210</class>
<birth>Sep 16th</birth>
<constell>Virgo</constell>
<mobile>1307994</mobile>
</member>
<member>
<name>tastestory</name>
<class>W15</class>
<birth>Nov 29th</birth>
<constell>Sagittarius</constell>
<mobile>1095245</mobile>
</member>
<member>
<name>lovehate</name>
<class>W47</class>
<birth>Sep 5th</birth>
<constell>Virgo</constell>
<mobile>6098017</mobile>
</member>
<member>
<name>slepox</name>
<class>W19</class>
<birth>Nov 18th</birth>
<constell>Scorpio</constell>
<mobile>0658635</mobile>
</member>
<member>
<name>smartlau</name>
<class>W19</class>
<birth>Dec 30th</birth>
<constell>Capricorn</constell>
<mobile>0006621</mobile>
</member>
<member>
<name>tuonene</name>
<class>W210</class>
<birth>Nov 26th</birth>
<constell>Sagittarius</constell>
<mobile>0091704</mobile>
</member>
<member>
<name>dovecho</name>
<class>W19</class>
<birth>Dec 9th</birth>
<constell>Sagittarius</constell>
<mobile>1892013</mobile>
</member>
<member>
<name>shanghen</name>
<class>W42</class>
<birth>May 24th</birth>
<constell>Gemini</constell>
<mobile>1544254</mobile>
</member>
<member>
<name>venessawj</name>
<class>W45</class>
<birth>Apr 1st</birth>
<constell>Aries</constell>
<mobile>1523753</mobile>
</member>
<member>
<name>lightyear</name>
<class>W311</class>
<birth>Mar 23th</birth>
<constell>Aries</constell>
<mobile>1002908</mobile>
</member>
</list>

4、处理多个异步请求

三、ajax框架

伍、ajax的更多相关文章

Django知识总结(三)
拾伍 ● Ajax技术一 ● Ajax定义 Ajax: 异步的 JavaScript 和 XML (Asynchronous+Javascript+XML) 通过Ajax, 我们可以在不重新加载整个 ...
ajax原理，验证码生成原理
什么是ajax AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML 指一种创建交互式网页应用的网页开发技术. 不是指一种单一的 ...
学无止境，学习AJAX（二）
POST 请求一个简单 POST 请求: xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send(); ...
jQuery之ajax实现篇
jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能由于jq中的ajax方法是用了内置的deferred模块,是P ...
Ajax及跨域
概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...
一个粗心的Bug，JSON格式不规范导致AJAX错误
一.事件回放今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...
ABP文档 - Javascript Api - AJAX
本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...
ajax异步请求
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...
调用AJAX做登陆和注册
先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

随机推荐

MyBatis 基础入门
MyBatis 是一个半自动化的持久层的框架,能让开发者专注SQL本身 JDBC 连接数据库的硬编码问题,通过config,mapper配置文件解决 Mybatis开发需要关注的文件 l POJO类( ...
vue自己写了一个div菜单，点击按钮展开，点击其他地方关闭这个div菜单
需求是通过点击body页面,在其他地方就关闭这个<div>菜单,给这个div一个id:problemList,但是点击我打开的按钮,不关闭. created () { document.o ...
SLAB
slab:由于内核会有许多小对象,这些对象构造销毁十分频繁,比如i-node,dentry,这些对象如果每次构建的时候就向内存要一个页(4kb),而其实只有几个字节,这样就会非常浪费,为了解决这个问题 ...
iview datepicker 选择的时间少一天
使用iview的datepicker时间选择器发现获取的value值是比实际要少一天,严格来说应该是时间格式不一样,datepicker获取的时间是UTC时间格式,也就是:yyyy-MM-ddTHH: ...
[GSS5] Can you answer these queries V
大力讨论. luogu上交spoj的题卡的一比... 难受 wa了好几次,原因大概首先求的是非空区间,不能乱和0取max,第二点是求无相交的解时,在两段求lmx和rmx的时候可以取max(0). 区间 ...
ftp服务器在linux中安装
1.安装执行 yum -y install vsftpd 2.检验是否安装vsftpd : rmp -qa | grep vsftpd 默认配置文件/ect/vsftpd/vsftpd.c ...
python初学者学习笔记
python开发: a.Python基础 b.网络编程 c.web框架 —用于写网站 d.设计阶段+算法 e.项目阶段开发: 开发语言:高级语言:python/Java/PHP/C#/Go/ruby ...
端到端图片识别 Python实现 Tensorflow
基于python语言的tensorflow的‘端到端’的字符型验证码识别 1 Abstract 验证码(CAPTCHA)的诞生本身是为了自动区分自然人和机器人的一套公开方法, 但是近几年的 ...
最短路&查分约束
[HDU] 1548 A strange lift 根蒂根基最短路(或bfs)★ 2544 最短路根蒂根基最短路★ 3790 最短路径题目根蒂根基最短路★ 2066 一小我的观光根蒂根基最短路( ...
BA--调试经验笔记
100%的湿度是水蒸气,称做饱和空气,人体的相对湿度范围为20%---60%,当室内的湿度小于20%时,容易产生静电,尤其在计算机上,超过60%就过湿冬天适宜温度24.5+-1.5,夏天适宜温度22 ...

伍、ajax

伍、ajax的更多相关文章

随机推荐

热门专题