主要内容：

  1. Ajax原理
  2. Ajax核心技术

Ajax是Asynchronous JavaScript and XML的简称，意思是异步的JavaScript和XML。

主要包括技术：

  1. web标准的XHTML+CSS
  2. 使用DOM（Document object model）进行动态显示和交互
  3. 使用xml和xslt标签进行数据交换
  4. 使用XMLHttpRequest与服务器进行异步数据查询和检索
  5. 使用JavaScript绑定

Ajax原理

创建一个XMLHttpRequest对象向服务器发送异步请求，获取数据后使用JavaScript的DOM模型对象更新页面。（局部更新）
ajax为了实现这种异步请求，在客户端和服务器之间增加了一层Ajax引擎。它实现了用户与服务器之间的过渡（中介）。由于客户端和服务器不会直接交互，需要一个中介传递信息。
（自己简单的制作了一个图，直接使用mspaint画的，虽然有点丑）
 
 

Ajax核心技术

XMLHttpRequest+DOM+CSS可实现局部刷新功能，其中最核心的就是XMLHttpRequest对象。

XMLHttpRequest

XMLHttpRequest常用属性：

  • readyState（0未初始化，1正在加载，2加载完毕，3交互，4完成）
  • onreadystatechange（每次状态改变后触发的处理程序）
  • responseText（服务器返回的数据）
  • responseXML（服务器返回DOM兼容的文档数据对象）
  • status（服务器返回代码，比如404——NOT FUND,200——OK）
XMLHttpRequest常用方法：
  • open（string method，string url，boolean asynch）调用服务器，第三个参数可以不填，默认ture
  • send（content）发送到服务器

XMLHttpRequest的创建流程：

  • 创建XMLHttpRequest对象并初始化
  • 发送请求
  • 服务器接受请求并处理
  • 返回响应数据
  • 客户端接受并处理结果
  • 依据响应数据修改客户端页面内容

代码演示一下：

XMLHttpRequestDemo.js
var xmlHttp;//用于存储XMLHttpRequest对象

//创建一个XMLHttpRequest对象

function createXmlHttp(){

	//根据XMLHttpRequest对象是否存在，使用不同的创建方式

	if(window.XMLHttpRequest){

		xmlHttp=new XMLHttpRequest();//Firefox、Opera支持的创建方式

	}else{

		xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式

	}

}

//发送请求

function sendrequest(){

	createXmlHttp();

	xmlHttp.open("GET","request.jsp",true);//第三个参数默认为true

	xmlHttp.onreadystatechange=doinfo;//指定响应函数

	xmlHttp.send(null);

}

//处理返回结果

function doinfo(){

	if(xmlHttp.readyState==4){//判断状态是否为4（完成）

		if(xmlHttp.status==200){//判断信息已经成功返回

			//处理信息

			var res=XHR.responseXML.getElementsByTagName("res")[0].firstChild.data;

		}

	}

}

JavaScript（Java脚本）

在Ajax中，JavaScript就像是一座桥梁，将HTML与（DOM，XMLHttpRequest，css，xml）联系起来。

最常用的是JavaScript的事件，比如：

  • onchange（选中区域的值发生改变触发），
  • onclick（鼠标左键单击触发），
  • onload（文档加载触发），
  • onkeyup（键盘按下释放后触发）

DOM（文档对象模型）

它封装了对HTML、xml操作的接口。在Ajax中如果没有DOM，那么局部刷新，异步请求等操作将无法进行。

常用属性：

  • nodeName节点名称
  • nodeValue节点值
  • parentNode父节点
  • childNodes子节点
  • firstChild子节点列表中第一个节点
  • attributes返回元素的属性列表（仅用于元素节点）

常用的节点方法：

  • createElement（elemntName）创建一个元素
  • createAttribute（attributeName）创建一个属性
  • setAttribute（name，value）创建一个name属性并设置为value
  • getElementByTagName(elementName)返回具有指定名称元素的节点列表
  • getElementById（elementId）返回具有指定Id元素的节点

CSS（样式表）

由于web开发越来越注意页面的美化效果，所以css也越来越火了，在Ajax中css同样担负美化作用。

美工人员将控制页面的样式写入一个.css后缀的文件，开发人员只需要通过一个语句便可以将样式应用进来，十分方便。

<link href="skin.css" type="text/css" rel="stylesheet" />

XML

一种可扩展的标记语言，使用语法与HTML相似，也是由标签和文本组成。

区别：

  • HTML的标签是定义好的（不可私自更改），XML标签是自定义的（随便你更改）
  • HTML关心文本的显示形式（颜色，大小），XML更关心文本的内容

下面直接码代码，使用XMLHttpRequest对象，将XML文档的内容获取出来并显示在页面上：

AjaxDemo.html

<html>

	<head>

		<!-- <meta charset="utf-8" /> -->

		<title>Demo</title>

	</head>

	<body>

		<h1>Ajax中XML的作用</h1>

		<br/>

		<input type="button" value="点击" onclick="sendRequest()" />

		<br/>

		<div id="bookinfo"></div>

		<script language="javascript">

			var xmlHttp;//用于存储XMLHttpRequest对象

			//创建一个XMLHttpRequest对象

			function createXmlHttp(){

				//根据XMLHttpRequest对象是否存在，使用不同的创建方式

				if(window.XMLHttpRequest){

					xmlHttp=new XMLHttpRequest();//Firefox、Opera支持的创建方式

				}else{

					xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式

				}

			}

			//发送请求

			function sendRequest(){

				createXmlHttp();

				console.log("读取book.xml文件");

				xmlHttp.open("GET","book.xml",true);//第三个参数默认为true

				xmlHttp.onreadystatechange=doInfo;//指定响应函数

				xmlHttp.send(null);

			}

			//处理返回结果

			function doInfo(){

				if(xmlHttp.readyState==4){//判断状态是否为4（完成）

					if(xmlHttp.status==200){//判断信息已经成功返回

						//处理信息

						var res=xmlHttp.responseXML;

						var xml=xmlHttp.responseText;

						alert(xml);//显示xml内容

						var name=res.getElementsByTagName("name")[0].firstChild.nodeValue;

						var writer=res.getElementsByTagName("writer")[0].firstChild.nodeValue;

						var data=res.getElementsByTagName("date")[0].firstChild.nodeValue;

						var price=res.getElementsByTagName("price")[0].firstChild.nodeValue;

						var response=name+"<br/>"+writer+"<br/>"+data+"<br/>"+price;

						document.getElementById("bookinfo").innerHTML=response;

					}

				}

			}

		</script>

	</body>

</html>

book.xml

<?xml version="1.0" encoding="utf-8" ?>

<book>

	<name>书名：《消失的地平线》（Lost horizon）</name>

	<writer>作者：【英国】詹姆斯 希尔顿（James Hilton）</writer>

	<date>出版日期：1933年4月</date>

	<price>价格：50.00</price>

	<number>出版数：10000</number>

</book>

运行效果：

需要注意的地方，就是这个xml文件和html文件得放在同一个路径下，并且部署到服务器中

这里的服务器使用的tomcat（小猫咪比较好用）

ok，就到这里。欢迎大家交流分享。

请尊重本人辛苦劳动成果

转载请注明：

https://www.cnblogs.com/1906859953Lucas/p/9416479.html

谢谢啦。

【原】Ajax技术原理的更多相关文章

  1. Ajax 技术原理（转）

    Ajax 技术原理 2010-01-04 原文出处:http://www.nowamagic.net/ajax/ajax_AjaxPrinciple.php 在写这篇文章之前,曾经写过一篇关于AJAX ...

  2. Ajax技术原理小结

    ajax:Asynchronous Javascript and XML   异步Javascript 和XML.           是一种创建交互式网页应用的网页开发技术.   1.0 优势:   ...

  3. ajax 技术和原理分析

    ajax所包含的技术 大家都知道ajax并非一种新的技术,而是几种原有技术的结合体.它由下列技术组合而成. 1.使用CSS和XHTML来表示. 2. 使用DOM模型来交互和动态显示. 3.使用XMLH ...

  4. Ajax实例OR技术原理 转自 （http://blog.csdn.net/evankaka ）

    摘要:AJAX即“Asynchronous Javascript And XML”(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用于创建快速动态网页的 ...

  5. Ajax学习总结（1）——Ajax实例讲解与技术原理

    摘要:AJAX即"Asynchronous Javascript And XML"(异步JavaScript和XML),是指一种创建交互式网页应用的网页开发技术.AJAX 是一种用 ...

  6. Ajax工作原理

    在写这篇文章之前,曾经写过一篇关于AJAX技术的随笔,不过涉及到的方面很窄,对AJAX技术的背景.原理.优缺点等各个方面都很少涉及null.这次写这篇文章的背景是因为公司需要对内部程序员做一个培训.项 ...

  7. 关于Ajax工作原理

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  8. Ajax技术

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

  9. Ajax工作原理（转）

    1.ajax技术的背景 不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth.google suggest以及gmail等对ajax技术的广泛应用,催生了ajax ...

随机推荐

  1. cesium编程入门(九)实体 Entity

    cesium编程入门(九)实体 Entity 在cesium编程入门(五)绘制形状提到过添加实体的方法,这一节聊一聊实体相关的一些内容: 先来看 Entity 的各个属性 id 唯一标志,如果没设置, ...

  2. Elasticsearch学习(4) spring boot整合Elasticsearch的聚合操作

    之前已将spring boot原生方式介绍了,接下将结介绍的是Elasticsearch聚合操作.聚合操作一般来说是解决一下复杂的业务,比如mysql中的求和和分组,由于博主踩的坑比较多,所以博客可能 ...

  3. 【Oracle 12c】最新CUUG OCP-071考试题库（57题）

    57.(14-17) choose two: Examine the structure of the DEPARTMENTS table You execute the following comm ...

  4. “全栈2019”Java第一百零八章：匿名内部类与final关键字

    难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第 ...

  5. iOS仿UC浏览器顶部频道滚动效果

    很喜欢用UC浏览器上网,当然不是给UC打广告,里面有很多酷炫的效果,值的学习,这次分享的是频道滚动的效果.动画效果如下: 实现的这个效果的关键是绘制,重写顶部Label的drawRect方法 gith ...

  6. linux 下的 crontab 定时任务工具

    以下内容转自:https://www.cnblogs.com/longjshz/p/5779215.html 在LINUX中,周期执行的任务一般由cron这个守护进程来处理[ps -ef|grep c ...

  7. Windows运行常用命令（win+R）

    Windows运行常用命令(win+R) 1.calc: 启动计算器 2.notepad: 打开记事本 3.write: 写字板 4.mspaint: 画图板 5.snippingtool:截图工具, ...

  8. LARTC

    大牛的博客 howto ,however, is simplify. another space ip link list ip address show ip route show route -n ...

  9. MongoDB ver 4 几个常用命令

    1. 为某个数据库创建用户: use db_test1; db.createUser({ user:"test_user_1", pwd:"test_user_1_pwd ...

  10. Xamarin Mono For Android 4.6.07004看不到新建android

    有很多朋友安装了Xamarin Mono For Android 4.6.07004看不到新建android项目 PS 官方安装包有BUG,在某些情况下可能会出现丢失VS插件的情况 (遇到此BUG请下 ...