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,Safarixmlhttpread=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>

 

转载于:https://www.cnblogs.com/forever-xuehf/p/9016314.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/367064.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Leetcode 456. 132 Pattern

题目的意思就是给你一个数组 里面一堆数&#xff0c;你是否能找到这样三个数&#xff0c;第一个数比第三个数小&#xff0c;第二个数最大。比如 1, 3, 2 或者 4, 9, 5 这种&#xff0c;数字可以不连续在一起&#xff0c;但是要保证顺序不变&#xff0c;只要有这么一组数就可以…

「起点订阅页」Checkbox 美化引发的蝴蝶效应

本文作者&#xff1a;任家乐 原创声明&#xff1a;本文为阅文前端团队 YFE 成员出品&#xff0c;请尊重原创&#xff0c;转载请联系公众号 (id: yuewen_YFE) 获取授权&#xff0c;并注明作者、出处和链接。 性能风暴 「据说亚马逊雨林的一只蝴蝶偶尔扇动几下翅膀&#xff0c;可…

python polar函数_Python可视化很简单,可是你会吗?python绘制饼图、极线图和气泡图,让我来教教你吧,一文教会!!!...

matplotlib库作为Python数据化可视化的最经典和最常用库&#xff0c;掌握了它就相当于学会了Python的数据化可视化&#xff0c;今天呢&#xff0c;咱们就一起来聊聊关于Python如何去绘制饼图、极线图和气泡图吧好啦&#xff0c;废话少说&#xff0c;咱们就开始吧&#xff01;用…

Java中的访问者设计模式–示例教程

访客模式是行为设计模式之一 。 当我们必须对一组相似类型的对象执行操作时&#xff0c;将使用访问者模式。 借助访问者模式&#xff0c;我们可以将操作逻辑从对象移动到另一个类。 例如&#xff0c;假设有一个购物车&#xff0c;我们可以在其中添加不同类型的项目&#xff08…

函数递归与二分法

1.什么是函数递归 函数的递归调用是函数嵌套调用的一种特殊形式&#xff0c; 特殊在调用一个函数的过程中又直接或者间接地调用了该函数本身 递归本质就是一个循环的过程&#xff0c; 但是递归必须满足两个原则&#xff1a; 1.每进入下一层递归&#xff0c;问题的规模必须有所减…

使用Oracle WebLogic创建部署计划

创建部署计划 部署计划是JSR-88部署标准的一部分&#xff0c;尽管在该标准中未明确说明。 部署计划是一个XML文档&#xff0c;用于定义自定义WebLogic Server部署环境。 此配置可用于覆盖在应用程序归档文件中定义的特定设置。 有许多原因可能导致您不希望修改应用程序存档的原…

记录一个前端架构的想法

前端&#xff0c;真的是让我哭笑不得的职业&#xff0c;从几年前作为打酱油的理想职业到现在的热门职业&#xff0c;无疑在这个过程中&#xff0c;门槛变高了&#xff0c;而且还是非常高。一大堆的框架和库&#xff0c;像什么vue啦、react啦、angular啦、webpack啦等等等等。让…

java文件解压文件_java 文件解压缩

直接上代码&#xff1a;import java.io.BufferedInputStream;import java.io.BufferedOutputStream;import java.io.File;import java.io.FileInputStream;import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;import java.io.I…

JAVA 遍历Map对象

方式一 这是最常见的并且在大多数情况下也是最可取的遍历方式。在键值都需要时使用。 Map<Integer, Integer> map new HashMap<Integer, Integer>(); for (Map.Entry<Integer, Integer> entry : map.entrySet()) { System.out.println("Key " …

sol - 0x60,61,62

[例题]走廊泼水节 设当前扫描到边x,y&#xff0c;长度为z&#xff0c;x所处的并查集为Sx&#xff0c;y所处的并查集为Sy&#xff1b; 对于任意u属于Sx&#xff0c;v属于Sy&#xff0c;我们可以知道u&#xff0c;v之间必连一条边 但是我们要在保证x,y之间的边属于唯一最小生成树…

将Spring Bean注入非托管对象

依赖注入带来的好处可能会上瘾。 使用注入配置应用程序结构比手动完成所有解析要容易得多。 当我们有一些在容器外部实例化的非托管类时&#xff0c;例如在Vaadin UI组件或JPA实体等其他框架中&#xff0c;它们是很难被退出的。 当我们使用域驱动设计时&#xff0c;后者尤其重要…

java 编程原理_Java网络编程 -- 网络编程基础原理

Hello&#xff0c;今天记录下 Java网络编程 --> 网络编程基础原理。一起学习&#xff0c;一起进步。继续沉淀&#xff0c;慢慢强大。希望这文章对您有帮助。若有写的不好的地方&#xff0c;欢迎评论给建议哈&#xff01;初写博客不久&#xff0c;我是杨展浩。这是我的第十五…

JavaScript基础之--- 深拷贝与浅拷贝

理解深拷贝和浅拷贝之前&#xff0c;先来看一下JavaScript的数据类型。 1、基本类型和引用类型 //案例1 var num1 1, num2 num1; console.log(num1) //1 console.log(num2) //1 num2 2; //修改num2 console.log(num1) //1 console.log(num2) //2 //案例2 var obj1 {x: 1, …

vue菜鸟从业记:完成项目最后一公里之真机测试和打包上线

最近我朋友王小闰他们公司的项目开发已经进入收尾阶段&#xff0c;前后端并行开发的差不多了&#xff0c;联调也调过了&#xff0c;上篇文章里也讲到了&#xff0c;所谓联调&#xff0c;就仿佛在说“我也不知道我的接口文档写的对不对&#xff0c;我们验证一下吧&#xff1f;我…

血淋淋的事实告诉你:你为什么不应该在JS文件中保存敏感信息

在JavaScript文件中存储敏感数据&#xff0c;不仅是一种错误的实践方式&#xff0c;而且还是一种非常危险的行为&#xff0c;长期以来大家都知道这一点。 而原因也非常简单&#xff0c;我们可以假设你为你的用户动态生成了一个包含API密钥的JavaScript文件&#xff1a; apiCall…

使用Infinispan进行Camel的事务性缓存

不久前&#xff0c;我为Camel 创建了Redis连接器。 Redis是很棒的键值存储&#xff08;还有更多&#xff09;&#xff0c;但是随后我需要一个在与Camel相同的JVM中运行的缓存&#xff0c;并注意到Infinispan已切换到ASL v2 。 Camel中已经有其他用于在JVM上进行缓存的连接器&am…

“景驰科技杯”2018年华南理工大学程序设计竞赛 A. 欧洲爆破(思维+期望+状压DP)...

题目链接&#xff1a;https://www.nowcoder.com/acm/contest/94/A 题意&#xff1a;在一个二维平面上有 n 个炸弹&#xff0c;每个炸弹有一个坐标和爆炸半径&#xff0c;引爆它之后在其半径范围内的炸弹也会爆炸&#xff0c;每个炸弹最多爆炸一次&#xff0c;每次随机选一个未引…

java 日期是否合法_检测日期字符串是否为合法(java版)

1 /**2 * 检测日期字符串是否为合法3 *paramdateStr4 *paramformat5 *return6 */7 public static final boolean checkDateFormat(String dateStr,String format) throwsNumberFormatException{8 if(dateStr null || "".equals(dateStr) ) return false;9 if(dateSt…

从零开始搭建一个vue.js的脚手架

在谷歌工作的时候&#xff0c;我们要做很多界面的原型&#xff0c;要求快速上手&#xff0c;灵活运用&#xff0c;当时用的一些现有框架&#xff0c;比如angular&#xff0c;太笨重了——尤雨溪&#xff08;Vue.js 作者&#xff09; vue.js是现在一个很火的前端框架&#xff0c…

更安全的Web通信HTTPS

1. HTTP协议存在的问题 阅读本篇需要对HTTP协议有最基本的了解。 借用《图解密码技术》里的图片&#xff0c;我们以如下一个购物场景开始介绍&#xff1a; 在网购过程中&#xff0c;如果使用纯粹的HTTP协议&#xff0c;那么用户的账号密码&#xff0c;信用卡&#xff0c;银行卡…