一、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、异步对象连接服务器

<script language="javascript">
var xmlHttp;//先声明一个全局变量
function createXMLHttpRequest(){//创建异步对象
if(window.ActiveXObject)//if语句进行判断
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function startRequest(){
createXMLHttpRequest();
xmlHttp.open("GET","9-1.aspx",true);
xmlHttp.onreadystatechange = function(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200)//4是数据接收完成、200是请求成功。
alert("服务器返回: " + xmlHttp.responseText);
}
xmlHttp.send(null);//数据不发送给服务器
}
</script>

2、DET和POST模式

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

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

<script language="javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject)
xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
else if(window.XMLHttpRequest)
xmlHttp = new XMLHttpRequest();
}
function createQueryString(){
var firstName = document.getElementById("firstName").value;
var birthday = document.getElementById("birthday").value;
var queryString = "firstName=" + firstName + "&birthday=" + birthday;
return encodeURI(encodeURI(queryString)); //两次编码解决中文乱码问题
}
function doRequestUsingGET(){
createXMLHttpRequest();
var queryString = "9-3.aspx?";
queryString += createQueryString() + "&timestamp=" + new Date().getTime();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",queryString);
xmlHttp.send(null);
}
function doRequestUsingPOST(){
createXMLHttpRequest();
var url = "9-3.aspx?timestamp=" + new Date().getTime();
var queryString = createQueryString();
xmlHttp.open("POST",url);
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlHttp.send(queryString);
}
function handleStateChange(){
if(xmlHttp.readyState == 4 && xmlHttp.status == 200){
var responseDiv = document.getElementById("serverResponse");
responseDiv.innerHTML = decodeURI(xmlHttp.responseText); //解码
}
}
</script>
</head>

<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>
<!--
.datalist{
border:1px solid #744011; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#ffd2aa; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #744011; /* 行名称边框 */
background-color:#a16128; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #744011; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color:#dca06b; /* 动态变色 */
}
input{ /* 按钮的样式 */
border:1px solid #744011;
color:#744011;
}
-->
</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-->

<?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的更多相关文章

  1. Django知识总结(三)

    拾伍 ● Ajax技术 一 ● Ajax定义 Ajax: 异步的 JavaScript 和 XML (Asynchronous+Javascript+XML) 通过Ajax, 我们可以在不重新加载整个 ...

  2. ajax原理，验证码生成原理

    什么是ajax AJAX:”Asynchronous JavaScript and XML” 中文意思:异步JavaScript和XML 指一种创建交互式网页应用的网页开发技术.   不是指一种单一的 ...

  3. 学无止境，学习AJAX（二）

    POST 请求 一个简单 POST 请求: xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send(); ...

  4. jQuery之ajax实现篇

    jQuery的ajax方法非常好用,这么好的东西,你想拥有一个属于自己的ajax么?接下来,我们来自己做一个简单的ajax吧. 实现功能 由于jq中的ajax方法是用了内置的deferred模块,是P ...

  5. Ajax及跨域

    概念 Ajax Ajax,Asynchronous JavaScript and XML,字面意思:异步的 JavaScript 和 XML,是指一种创建交互式网页应用的网页开发技术. 用于异步地去获 ...

  6. 一个粗心的Bug，JSON格式不规范导致AJAX错误

    一.事件回放  今天工作时碰到了一个奇怪的问题,这个问题很早很早以前也碰到过,不过没想到过这么久了竟然又栽在这里. 当时正在联调一个项目,由于后端没有提供数据接口,于是我直接本地建立了一个 json ...

  7. ABP文档 - Javascript Api - AJAX

    本节内容: AJAX操作相关问题 ABP的方式 AJAX 返回信息 处理错误 HTTP 状态码 WrapResult和DontWrapResult特性 Asp.net Mvc 控制器 Asp.net ...

  8. ajax异步请求

    做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事.既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.c ...

  9. 调用AJAX做登陆和注册

    先建立一个页面来检测一下我们建立的用户名能不能用,看一下有没有已经存在的用户名吗 可以通过ajax提示一下 $("#uid").blur(function(){ //取用户名 va ...

随机推荐

  1. java 常用API 包装

    package com.oracel.demo01; public class Baozhuang { //将字符串转成基本数据类型 public static void main(String[] ...

  2. C++基础 (10) 第十天 C++中类型转换 异常 栈解旋 io操作

    1之前内容的回顾 C语言中的类型转换(int)a  强转可读性太差了 C++把()拆分成了四种转换方式 static_cast static_cast在编译器编译阶段就进行转换了 2.dynamic_ ...

  3. 【JavaScript框架封装】公共框架的封装

    /* * @Author: 我爱科技论坛 * @Time: 20180706 * @Desc: 实现一个类似于JQuery功能的框架 // 公共框架 // 种子模块:命名空间.对象扩展.数组化.类型的 ...

  4. ArcGIS中标格乱码？？

    安装好ArcGIS之后导入地图层之后,显示 label 时中文乱码,但是导出数据显示正常 这是 ArcGIS 安装环境编码的问题,只需要修改一下配置文件即可 打开 cmd 命令窗口 reg add H ...

  5. socket 客户端的认证

    一:使用 hashlib 进行加密验证: # server.py 服务端 import os import socket import hashlib ​ def check_conn(conn): ...

  6. 和大华电子称通讯的奇怪现象-不能关闭Socket客户端的连接

    大华电子称作为socket Server,命令自定义成02+命令+0d0a03格式.,返回给客户端的字符串也是自定义的.这就给懒人造成非常不方便. 最关键的是连接server后,disconnec没有 ...

  7. H3C防火墙——回环流量问题（内网终端通过外网IP访问内部服务器）

    http://www.bubuko.com/infodetail-1533703.html

  8. Struts文件下载具体解释

    在做项目中上传下载肯定是少不了的,本博文对struts2的下载进行解释并附上部分代码 1.action类 public class FileDownLoadAction extends ActionS ...

  9. 图像滤镜艺术---保留细节的磨皮之C#程序实现

    上一篇博文"保留细节的磨皮滤镜之PS实现"一文中.我简介了本人自己总结的一种非常easy的磨皮滤镜,这个滤镜在磨光皮肤的同一时候,会保留非常不错的细节,今天,我将介绍使用C#程序实 ...

  10. 假设让我又一次设计一款Android App

    转载请注明出处: 本文来自aspook的博客:http://blog.csdn.net/ahence/article/details/47154419 开发工具的选择 开发工具我将选用Android  ...