Ajax知识总结
一
AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。
使用Ajax可以节省网络带宽，提高网页加载速度，缩短用户等待时间
Ajax工作原理：JavaScript，异步数据获取技术XMLHttpRequet（核心）,数据交换和操作技术xml,动态显示和交互技术Dom,XHTML和CSS
二
创建XMLHttpRequet对象：
1.构造函数的方式：request=new XMLHttpRequet()-->针对firefox,opera,safari高级浏览器
2.xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")-->IE6及以上
3.xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")-->IE6以下
三
XMLHttpRequet对象的三个属性：
1.onreadystatechange存储处理服务器响应的函数
2.readyState存储服务器响应的状态信息。五个值 0请求未初始化即还没有发起请求(请求未初始化)。1表示请求已经提出在请求发出去之前(服务器连接已建立)。2请求已经发送通常可以从响应得到头部信息(请求已接收)。3服务器正在处理中但是未响应完成(请求处理中)。4服务器请求完成并且已经响应(请求已完成，且响应已就绪)。200:"OK"
404:未找到页面
3.responseText获取由服务器返回的数据（字符串形式的响应数据），responseXML获得XML形式的响应数据。
四
XMLHttpRequet对象的两个方法：
1.open() 参数三个 GET/POST表明http请求的类型方法，URL参数是服务器上文件的地址即文件在服务器上的位置，该文件可以是任何类型的文件，规定对请求异步处理标志true（异步）或 false（同步），用于Ajax必须为true。当使用false时，不用编写onreadystatechange函数-->把代码放到 send()语句后面。
2.send() 将请求发送到服务器端。如建立请求request.open("GET","test.txt",true) 然后发送请求request.send()
get快简单，但使用post：1.无法使用缓存文件（更新服务器上的文件或数据库）。2.向服务器发送大量数据（POST 没有数据量限制）。3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
五
1.GET请求：若希望通过GET方法发送信息，需向URL添加信息
2.POST请求：若需要像HTML表单一那样的数据，需用setRequestHeader(header,value)添加http头（header: 规定头的名称，value: 规定头的值），然后在send()方法中规定希望发送的数据，类似这样的xmlhttp.send("fname=Henry&lname=Ford");需要信息
六
回调函数是一种以参数形式传递给另一个函数的函数。如果网站上存在多个AJAX 任务，那么应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）
七
1.AJAX与ASP/PHP实例， AJAX 用于创造动态性更强的应用程序。（showHint() 函数，该函数由 "onkeyup" 事件触发）（当用户在输入框中键入字符时，网页如何与 web 服务器进行通信。类似搜索引擎提示等）
如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入框的内容）
2.Ajax与数据库实例，网页如何通过 AJAX 从数据库读取信息（showCustomer() 函数，该函数由 "onchange" 事件触发）
showCustomer() 函数执行以下任务：
检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数q（带有输入域中的内容）
3.Ajax与XML，网页如何使用 AJAX 来读取来自 XML 文件的信息（ loadXMLDoc() 函数）
loadXMLDoc() 函数执行后:
创建XMLHttpRequest对象，
添加当服务器响应就绪时执行的函数，并将请求发送到服务器。
当服务器响应就绪时，会构建一个HTML表格，从XML文件中提取节点（元素），最后使用XML数据的填充id="demo"的表格元素。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Ajax介绍入门</title>
</head>
<body>
<p>一.AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。</p>
<p>AJAX 不是新的编程语言，而是一种使用现有标准的新方法。</p>
<p>AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。</p>
<p>AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。</p>
<p>使用Ajax可以节省网络带宽，提高网页加载速度，缩短用户等待时间</p>
<p>Ajax工作原理：JavaScript，异步数据获取技术XMLHttpRequet（核心）,数据交换和操作技术xml,动态显示和交互技术Dom,XHTML和CSS</p>
<p>二.创建XMLHttpRequet对象：1.构造函数的方式：request=new XMLHttpRequet()-->针对firefox,opera,safari高级浏览器</p>
<p>2.xmlhttp=new ActiveXObject("Msxml2.XMLHTTP")-->IE6及以上</p>
<p>3.xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")-->IE6以下</p>
<p>三.XMLHttpRequet对象的三个属性：1.onreadystatechange存储处理服务器响应的函数</p>
<p>2.readyState存储服务器响应的状态信息。五个值 0请求未初始化即还没有发起请求(请求未初始化)。1表示请求已经提出在请求发出去之前(服务器连接已建立)。2请求已经发送通常可以从响应得到头部信息(请求已接收)。3服务器正在处理中但是未响应完成(请求处理中)。4服务器请求完成并且已经响应(请求已完成，且响应已就绪)。200:"OK"
404:未找到页面</p>
<p>3.responseText获取由服务器返回的数据（字符串形式的响应数据），responseXML获得XML形式的响应数据。</p>
<p>四.XMLHttpRequet对象的两个方法：1.open() 参数三个 GET/POST表明http请求的类型方法，URL参数是服务器上文件的地址即文件在服务器上的位置，该文件可以是任何类型的文件，规定对请求异步处理标志true（异步）或 false（同步），用于Ajax必须为true</p>
<p>2.send() 将请求发送到服务器端。如建立请求request.open("GET","test.txt",true) 然后发送请求request.send()</p>
<p>get快简单，但使用post：1.无法使用缓存文件（更新服务器上的文件或数据库）。2.向服务器发送大量数据（POST 没有数据量限制）。3.发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠</p>
<p>五.1.GET请求：若希望通过GET方法发送信息，需向URL添加信息</p>
<p>2.POST请求：若需要像HTML表单一那样的数据，需用setRequestHeader(header,value)添加http头（header: 规定头的名称，value: 规定头的值），然后在send()方法中规定希望发送的数据，类似这样的xmlhttp.send("fname=Henry&lname=Ford");需要信息</p>
<p>六.当使用false时，不用编写onreadystatechange函数-->把代码放到 send()语句后面。</p>
<p>七.回调函数是一种以参数形式传递给另一个函数的函数。如果网站上存在多个AJAX 任务，那么应该为创建XMLHttpRequest对象编写一个标准的函数，并为每个AJAX任务调用该函数。该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）</p>
<p>AJAX与ASP/PHP实例， AJAX 用于创造动态性更强的应用程序。（showHint() 函数，该函数由 "onkeyup" 事件触发）（当用户在输入框中键入字符时，网页如何与 web 服务器进行通信。类似搜索引擎提示等）</p>
<pre>
如果输入框为空 (str.length==0)，则该函数清空 txtHint 占位符的内容，并退出函数。
如果输入框不为空，showHint() 函数执行以下任务：
创建 XMLHttpRequest 对象
当服务器响应就绪时执行函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数 q （带有输入框的内容）
</pre>
<p>Ajax与数据库实例，网页如何通过 AJAX 从数据库读取信息（showCustomer() 函数，该函数由 "onchange" 事件触发）</p>
<pre>showCustomer() 函数执行以下任务：
检查是否已选择某个客户
创建 XMLHttpRequest 对象
当服务器响应就绪时执行所创建的函数
把请求发送到服务器上的文件
请注意我们向 URL 添加了一个参数q（带有输入域中的内容）
</pre>
<p>Ajax与XML，网页如何使用 AJAX 来读取来自 XML 文件的信息（ loadXMLDoc() 函数）</p>
<pre>
loadXMLDoc() 函数执行后:
创建XMLHttpRequest对象，
添加当服务器响应就绪时执行的函数，并将请求发送到服务器。
当服务器响应就绪时，会构建一个HTML表格，从XML文件中提取节点（元素），最后使用XML数据的填充id="demo"的表格元素
</pre>
<script>
function loadXML(){
var xmlhttpread;//创建对象
if (window.XMLHttpRequest){//通过判断决定对象创建方法
//支持IE7+,Firefox,Chrome,Opera,Safari
xmlhttpread=new XMLHttpRequest();
}else{
// IE6以下
xmlhttpread=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttpread.onreadystatechange=function(){
if (xmlhttpread.readyState==4 && xmlhttpread.status==200){//规定在响应处于onreadystatechange事件中的就绪状态（4/200）时执行的函数
alert();//readyState改变时，就会触发onreadystatechange事件，onreadystatechange 事件被触发 4 次（0 - 4）, 分别是： 0-1、1-2、2-3、3-4，对应着 readyState 的每个变化。
//此处可以有：1.document.getElementById('p1').innerHTML=responseText；从一个TXT文件中返回数据
//xmlhttp.status;xmlhttp.statusText;xmlhttp.responseText;等从一个XML文件中返回数据
//xmlhttp.getAllResponseHeaders();检索资源（文件）的头信息
//"Last modified: " + xmlhttp.getResponseHeader('Last-Modified');检索资源（文件）的指定头信息。
}
};
xmlhttpread.open("GET","wenjian.txt",true);
xmlhttpread.send();
}
</script>
</body>
</html>
Ajax知识总结的更多相关文章
- ajax知识整理
HTTP服务 1.服务器 服务器类型 服务类型:文件服务器.数据库服务器.邮件服务器.Web服务器等: 操作系统:Linux服务器.Windows服务器等: 应用软件:Apache服务器.Nginx ...
- Ajax 知识
Ajax 为什么要有ajax技术? 传统的web应用,一个简单的操作就要加载整个页面.浪费资源. Ajax 即“Asynchronous Javascript And XML”(异步JavaS ...
- AJax知识介绍
参考:http://www.runoob.com/ajax/ajax-asp-php.html
- Ajax知识
一.Ajax介绍前戏 1.json介绍 1.什么是json? json(JavaScript Object Notation,JS对象标记) 是一种轻量级的数据交换格式.它基于 ECMAScript ...
- Django学习笔记（14）——AJAX与Form组件知识补充（局部钩子和全局钩子详解）
我在之前做了一个关于AJAX和form组件的笔记,可以参考:Django学习笔记(8)——前后台数据交互实战(AJAX):Django学习笔记(6)——Form表单 我觉得自己在写Django笔记(8 ...
- 面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序
面向 Java 开发人员的 Ajax: 构建动态的 Java 应用程序 Ajax 为更好的 Web 应用程序铺平了道路 在 Web 应用程序开发中,页面重载循环是最大的一个使用障碍,对于 Java™ ...
- 70、django之Ajax初识
Ajax准么说是用于Javascript与服务器端进行交互的,我们之前呢没有了解ajax也同样可以完成与服务器的交互,那么ajax的优势在哪里?首先ajax是异步交互的也就是说我们基本不会遇到卡顿现象 ...
- AJAX+jQuery+ASP实现实时验证身份证信息是否已存在---人事系统
很多时候在网站上注册时,我们会发现,注册表单通常需要检查用户名和电子邮件地址的可用性:从而确保用户之间不拥有相同的用户名和电子邮件地址:一些网站喜欢在用户提交填写的用户信息时,做信息可用性的检查,而一 ...
- django之Ajax初识
Ajax准么说是用于Javascript与服务器端进行交互的,我们之前呢没有了解ajax也同样可以完成与服务器的交互,那么ajax的优势在哪里?首先ajax是异步交互的也就是说我们基本不会遇到卡顿现象 ...
随机推荐
- matlab练习程序（模糊集图像增强）
算法有很多变种.不过主要就是以下三步. 1.设计隶属度函数将图像从空间域变换到模糊集域. 2.设计模糊增强算子,在模糊集域对图像进行处理. 3.根据第1步的隶属度函数重新将图像从模糊集域变换到空间域. ...
- SQL 创建自定义方法，匹配正则
C#代码 using System.Text.RegularExpressions; public class FunctionRegex { [Microsoft.SqlServer.Server. ...
- 在Docker容器中安装jdk和spark
在Docker容器中安装jdk和spark 1.下载jdk和spark 可以使用迅雷等专业下载软件下载jdk和spark软件包,注意是linux版,这里直接给出下载地址: JDK下载地址 JDK进入后 ...
- Struts2学习-拦截器2续
定义拦截器有2种办法:1.实现Interceptor接口2.集成AbstractInterceptor抽象类 一.方法1 ..... <struts> <package name=& ...
- 探索grep命令
grep是linux的一款搜索工具,基本啥linux版本都有自带此工具.下面部分参数若没有说明,表示功力不够,理解不了. 选择匹配器 -E 正则表达式(相当于egrep命令) -F 将pattern当 ...
- python常用模块（一）
#什么是模块呢?就是用一大坨代码来完成一个功能的代码集合,是不是简单易懂 #类似于函数式编程和面向过程编程,函数式编程则完成一个功能,其他代码用来调用即可,提供了代码的重用性和代码间的耦合.而对于一个 ...
- February 25 2017 Week 8 Saturday
Energy and persistence can conquer all things. 能量和毅力可以征服一切. I have the persistence, but it seems I a ...
- python入门16 递归函数 高阶函数
递归函数:函数内部调用自身.(要注意跳出条件,否则会死循环) 高阶函数:函数的参数包含函数 递归函数 #coding:utf-8 #/usr/bin/python """ ...
- userdel
功能说明:用于删除指定的用户及该用户相关的文件. 参数选项:-f 强制删除用户,即使用户当前已登录.-r 删除用户的同时,删除与用户相关的所有文件. 说明:尽量不要用userdel删除用户,而是采用在 ...
- POJ 1379 模拟退火
模拟退火算法,很久之前就写过一篇文章了.双倍经验题(POJ 2420) 题意: 在一个矩形区域内,求一个点的距离到所有点的距离最短的那个,最大. 这个题意,很像二分定义,但是毫无思路,也不能暴力枚举, ...