微信做一元云购网站,大航母网站建设怎么样,搜索大全引擎,资源分享类网站模板一 AJAX Asynchronous JavaScript and XML#xff08;异步的 JavaScript 和 XML#xff09;。 AJAX 不是新的编程语言#xff0c;而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下#xff0c;可以与服务器交换数据并更新部分网页内容。AJAX …一 AJAX Asynchronous JavaScript and XML异步的 JavaScript 和 XML。 AJAX 不是新的编程语言而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下可以与服务器交换数据并更新部分网页内容。AJAX 不需要任何浏览器插件但需要用户允许JavaScript在浏览器上执行。使用Ajax可以节省网络带宽提高网页加载速度缩短用户等待时间Ajax工作原理JavaScript异步数据获取技术XMLHttpRequet核心,数据交换和操作技术xml,动态显示和交互技术Dom,XHTML和CSS 二 创建XMLHttpRequet对象 1.构造函数的方式requestnew XMLHttpRequet()--针对firefox,opera,safari高级浏览器2.xmlhttpnew ActiveXObject(Msxml2.XMLHTTP)--IE6及以上3.xmlhttpnew 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快简单但使用post1.无法使用缓存文件更新服务器上的文件或数据库。2.向服务器发送大量数据POST 没有数据量限制。3.发送包含未知字符的用户输入时POST 比 GET 更稳定也更可靠 五 1.GET请求若希望通过GET方法发送信息需向URL添加信息2.POST请求若需要像HTML表单一那样的数据需用setRequestHeader(header,value)添加http头header: 规定头的名称value: 规定头的值然后在send()方法中规定希望发送的数据类似这样的xmlhttp.send(fnameHenrylnameFord);需要信息 六 回调函数是一种以参数形式传递给另一个函数的函数。如果网站上存在多个AJAX 任务那么应该为创建XMLHttpRequest对象编写一个标准的函数并为每个AJAX任务调用该函数。该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务每次调用可能不尽相同 七 1.AJAX与ASP/PHP实例 AJAX 用于创造动态性更强的应用程序。showHint() 函数该函数由 onkeyup 事件触发当用户在输入框中键入字符时网页如何与 web 服务器进行通信。类似搜索引擎提示等如果输入框为空 (str.length0)则该函数清空 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数据的填充iddemo的表格元素。 !DOCTYPE html
html
head langenmeta charsetUTF-8titleAjax介绍入门/title
/head
bodyp一.AJAX Asynchronous JavaScript and XML异步的 JavaScript 和 XML。/ppAJAX 不是新的编程语言而是一种使用现有标准的新方法。/ppAJAX 最大的优点是在不重新加载整个页面的情况下可以与服务器交换数据并更新部分网页内容。/ppAJAX 不需要任何浏览器插件但需要用户允许JavaScript在浏览器上执行。/pp使用Ajax可以节省网络带宽提高网页加载速度缩短用户等待时间/ppAjax工作原理JavaScript异步数据获取技术XMLHttpRequet核心,数据交换和操作技术xml,动态显示和交互技术Dom,XHTML和CSS/pp二.创建XMLHttpRequet对象1.构造函数的方式requestnew XMLHttpRequet()--针对firefox,opera,safari高级浏览器/pp2.xmlhttpnew ActiveXObject(Msxml2.XMLHTTP)--IE6及以上/pp3.xmlhttpnew ActiveXObject(Microsoft.XMLHTTP)--IE6以下/pp三.XMLHttpRequet对象的三个属性1.onreadystatechange存储处理服务器响应的函数/pp2.readyState存储服务器响应的状态信息。五个值 0请求未初始化即还没有发起请求(请求未初始化)。1表示请求已经提出在请求发出去之前(服务器连接已建立)。2请求已经发送通常可以从响应得到头部信息(请求已接收)。3服务器正在处理中但是未响应完成(请求处理中)。4服务器请求完成并且已经响应(请求已完成且响应已就绪)。200:OK404:未找到页面/pp3.responseText获取由服务器返回的数据字符串形式的响应数据responseXML获得XML形式的响应数据。/pp四.XMLHttpRequet对象的两个方法1.open() 参数三个 GET/POST表明http请求的类型方法URL参数是服务器上文件的地址即文件在服务器上的位置该文件可以是任何类型的文件规定对请求异步处理标志true异步或 false同步用于Ajax必须为true/pp2.send() 将请求发送到服务器端。如建立请求request.open(GET,test.txt,true) 然后发送请求request.send()/ppget快简单但使用post1.无法使用缓存文件更新服务器上的文件或数据库。2.向服务器发送大量数据POST 没有数据量限制。3.发送包含未知字符的用户输入时POST 比 GET 更稳定也更可靠/pp五.1.GET请求若希望通过GET方法发送信息需向URL添加信息/pp2.POST请求若需要像HTML表单一那样的数据需用setRequestHeader(header,value)添加http头header: 规定头的名称value: 规定头的值然后在send()方法中规定希望发送的数据类似这样的xmlhttp.send(fnameHenrylnameFord);需要信息/pp六.当使用false时不用编写onreadystatechange函数--把代码放到 send()语句后面。/pp七.回调函数是一种以参数形式传递给另一个函数的函数。如果网站上存在多个AJAX 任务那么应该为创建XMLHttpRequest对象编写一个标准的函数并为每个AJAX任务调用该函数。该函数调用应该包含URL以及发生onreadystatechange事件时执行的任务每次调用可能不尽相同/ppAJAX与ASP/PHP实例 AJAX 用于创造动态性更强的应用程序。showHint() 函数该函数由 onkeyup 事件触发当用户在输入框中键入字符时网页如何与 web 服务器进行通信。类似搜索引擎提示等/ppre如果输入框为空 (str.length0)则该函数清空 txtHint 占位符的内容并退出函数。如果输入框不为空showHint() 函数执行以下任务创建 XMLHttpRequest 对象当服务器响应就绪时执行函数把请求发送到服务器上的文件请注意我们向 URL 添加了一个参数 q 带有输入框的内容/prepAjax与数据库实例网页如何通过 AJAX 从数据库读取信息showCustomer() 函数该函数由 onchange 事件触发/ppreshowCustomer() 函数执行以下任务检查是否已选择某个客户创建 XMLHttpRequest 对象当服务器响应就绪时执行所创建的函数把请求发送到服务器上的文件请注意我们向 URL 添加了一个参数q带有输入域中的内容/prepAjax与XML网页如何使用 AJAX 来读取来自 XML 文件的信息 loadXMLDoc() 函数/ppreloadXMLDoc() 函数执行后:创建XMLHttpRequest对象添加当服务器响应就绪时执行的函数并将请求发送到服务器。当服务器响应就绪时会构建一个HTML表格从XML文件中提取节点元素最后使用XML数据的填充iddemo的表格元素/prescriptfunction loadXML(){var xmlhttpread;//创建对象if (window.XMLHttpRequest){//通过判断决定对象创建方法//支持IE7,Firefox,Chrome,Opera,Safarixmlhttpreadnew XMLHttpRequest();}else{// IE6以下xmlhttpreadnew ActiveXObject(Microsoft.XMLHTTP);}xmlhttpread.onreadystatechangefunction(){if (xmlhttpread.readyState4 xmlhttpread.status200){//规定在响应处于onreadystatechange事件中的就绪状态4/200时执行的函数alert();//readyState改变时就会触发onreadystatechange事件onreadystatechange 事件被触发 4 次0 - 4, 分别是 0-1、1-2、2-3、3-4对应着 readyState 的每个变化。//此处可以有1.document.getElementById(p1).innerHTMLresponseText从一个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
