ajax原理总结附简单实例及其优点

在工作中用了Ajax
N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败! 

近有闲情,将之总结如下: 

【名称】 

Ajax是Asynchronous
JavaScript and XML(以及 DHTML 等)的缩写。 
详情请移步Ajax: A New
Approach to Web
Applications 

【原理】 

简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面内的元素,从而达到改变页面内容的目的。 
其中XmlHttpRequest对象是关键,因为它支持异步请求。XMLHttpRequest是完全用来向服务器发出一个请求的。它所包含的方法和属性如下所示: 
方法: 
abort()
导致当前正在请求被取消 
getAllResponseHeaders() 返回一个字符串,包含氖
响应标头的名称和值 
getResponseHeader(name)
返回指定的响应标头的值 
open(method, url, async, username, password)
设置请求的方法和目标URL。请求可以声明为同步的(可选),也可以给需要基于窗口谁的请求而提供用户名和口令(可选) 
send(content)
发起带有指定内容(可选)的请求 
setRequestHeader(name, value)
利用指定的名称和值,设置一个请求标头 
属性: 
onreadystatechange
指派在请求的状态发生变化时所使用的事件处理程序 
readyState
一个整数值,指示请求的状态如下: 
0—-未初始化 
1—-正在加载 
2—-已加载 
3—-交互 
4—–完成 
responseText
在响应里所返回的内容 
responseXML 如果内容是XML,就根据内容而创建XML
DOM 
status
从服务器所返回的响应状态码。例如:200表示成功,404表示未找到,参考HTTP规范 
statusText
响应所返回的状态文本消息 
对于此对象其它介绍请移步:XMLHttpRequest概述 

【所包含的技术】 

·
基于XHTML和CSS标准的表示; 
· 使用Document Object
Model进行动态显示和交互; 
·
使用XMLHttpRequest与服务器进行异步通信; 
·
使用JavaScript绑定一切; 
·
使用XML和XSLT;交换和操作数据。 
以上的技术都是一些广泛使用了的技术,都属于比较旧的技术,ajax是这几种技术的结合体。 

【简单实例】


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
function ajax() {
var xmlHttp;
// 依据对象判断,而不是依据浏览器
if(window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();//mozilla浏览器
}else if(window.ActiveXObject){
try{
xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP"); //IE老版本
}catch(e){}
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
}catch(e){}

if(!xmlHttp){
window.alert("不能创建XMLHttpRequest对象实列");
return false;
}
}

if (!xmlHttp) {
alert("创建XMLHttpRequest对象失败!");
return false;
}

xmlHttp.open(‘POST‘, ‘index.php?get_a=2&get_b=3‘, false);
xmlHttp.setRequestHeader(‘Content-type‘, ‘application/x-www-form-urlencoded;charset=UTF-8;‘);
xmlHttp.send("post_a=1&post_b=2");
xmlHttp.onreadystatechange = function() {
alert(xmlHttp.readyState);
}
if(xmlHttp.readyState == 4){ //判断对象状态
var content_obj = document.getElementById("content");
content_obj.innerHTML = "正在处理数据...";
if(xmlHttp.status == 200){ //信息已经成功返回,开始处理信息
var returnStr = xmlHttp.responseText;
content_obj.innerHTML = returnStr;
}else{ //页面不正常
content_obj.innerHTML = "您所请求的页面存在异常!";
}
}
}
</script>
</head>
<body>
<input type="button" value="ajax" onclick="ajax();" />
<div id="content">ajax内容显示区</div>
</body>
</html>

切记:当发起一个POST请求时,需要对报头
Content-type(内容类型)进行设置。这样,服务器就知道如何来处理上传的内容。如果要模拟通过HTTP协议的POST方式来发送表单,则应将内容类型设置为application/x-www-form-urlencoded。 

【优点】 

页面无刷新,用户体验好; 
异步,不打断用户操作,响应速度快; 
“按需取数据”,减少冗余请求,减轻服务器负担; 
基于标准化的并被广泛支持的技术,无需额外的插件; 
可以使数据和表现分离; 
【存在的问题】 
一些设备还不支持 
开发成本提高 
使back按钮失效,用户操作后无法返回; 
对流媒体支持没有flash之流好; 
对搜索引擎不友好 
破坏程序的异常机制 
存在一些安全问题,暴露了一些程序接口和数据逻辑

ajax原理总结附简单实例及其优点,布布扣,bubuko.com

时间: 2024-12-15 01:47:47

ajax原理总结附简单实例及其优点的相关文章

(三)AJAX基本介绍和简单实例03

AJAX基本介绍和简单实例03-----Ajax与数据库的动态应用 初始界面: 选择所有用户后显示的界面: 查询姓名为杜森的客户,结果如下: Demo03.html代码如下: <html> <meta http-equiv="content-type" content="text/html" charset="utf-8"/> <head> <style> body { background:#CC

php分页原理教程及简单实例

<?php //连接数据库 $con = mysql_connect("localhost","root",""); mysql_select_db("xueshengchu",$con); mysql_query("set names utf8"); $pageSize = 5; //每页显示数据条数 $result = mysql_query("select * from stu_msg

AJAX学习整理二之简单实例

做了几个简单的实例,加载txt文本内容.加载xml文件内容,把xml文本内容转换成html表格显示.废话不多说,直接贴代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/html"> <head>     <title>通过ajax获取文本内容</title>     <meta charset="utf-8">     <scr

原生ajax调用数据简单实例代码

原生ajax调用数据简单实例代码:由于jQuery的盛行,现在使用较多的是jQuery封装好了的ajax,因为解决了浏览器兼容性问题,这对程序员来说就等于去掉了一个心头大患,但并非原生ajax就销声匿迹,并且本人感觉还是对原生的ajax有所了解的好,下面就是一段ajax数据调用的实例代码,非常的简单,初学者可以参考一下.代码如下:一.兼容浏览器部分: function xmlHttpR() { var xmlhttp; if(window.XMLHttpRequest) { xmlhttp=ne

Linux C Socket编程原理及简单实例

原文:http://www.cnblogs.com/xudong-bupt/archive/2013/12/29/3483059.html 部分转自:http://goodcandle.cnblogs.com/archive/2005/12/10/294652.aspx 1.   什么是TCP/IP.UDP? 2.   Socket在哪里呢? 3.   Socket是什么呢? 4.   有很多的框架,为什么还在从Socket开始? 5.   Linux C Socket简单示例 1.什么是TCP

Ajax 原理过程 同步与异步区别 优缺点

ajax原理过程                                                                                                                                        利用XMLHttpRequest对象发送简单请求的基本步骤:1)创建XMLHttpRequest对象实例2)设定XMLHttpRequest对象的回调函数,利用onreadystatechange属性3)设定请求

什么是ajax,ajax原理是什么 ,优缺点是什么

AJAX工作原理及其优缺点 1.什么是AJAX?AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术.它使用:使用XHTML+CSS来标准化呈现:使用XML和XSLT进行数据交换及相关操作:使用XMLHttpRequest对象与Web服务器进行异步数据通信: 使用Javascript操作Document Object Model进行动态显示及交互: 使用JavaScript绑定和处理所有数据.

写一个ajax程序就是如此简单

写一个ajax程序就是如此简单 ajax介绍: 1:AJAX全称为Asynchronous JavaScript and XML(异步JavaScript和XML),指一种创建交互式网页应用的网页开发技术.     2:基于web标准XHTML+CSS的表示:     3:使用 DOM进行动态显示及交互:     4:使用 XML 和 XSLT 进行数据交换及相关操作:     5:使用 XMLHttpRequest 进行异步数据查询.检索: 程序员应用ajax的途经: 1:.Net下的Ajax

jQuery Datatable 实用简单实例

目标: 使用jQuery Datatable构造数据列表,并且增加或者隐藏相应的列,已达到数据显示要求.同时,jQuery Datatable强大的功能支持:排序,分页,搜索等. Query Datatable能良好支持数据完全加载到本地后构建数据列表,排序.分页.搜索等功能就会自带,不需要我们去关心,在此主要说明通过后台动态的加载数据,已达到在大数据面前提高效率的效果. 1. 通过后台进行分页 2. 通过后台进行排序 3. 通过后台进行搜索 具体使用方法: 1. 首先构建我们需要的数据列表,以