欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Ajax知识总结

程序员文章站 2022-06-05 08:20:50
一 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。 AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。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>