精华内容
下载资源
问答
  • Ajax学习

    2019-11-24 22:49:35
    Ajax学习 问题: 目前来,所有的请求的发送都是通过浏览器自己直接进行发送,响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。 现在,要求在保留原有页面内容的情况下显示新的响应内容。 解决...

    Ajax学习

    问题:

    目前来,所有的请求的发送都是通过浏览器自己直接进行发送,响应是浏览器在接收到响应信息后自主的将响应数据覆盖当前页面显示。

    现在,要求在保留原有页面内容的情况下显示新的响应内容。

    解决:

    使用ajax技术

    ajax原理:

    请求由ajax引擎对象发送,响应数据,浏览器不会直接进行处理,
    而是流转给发请求的ajax引擎对象。
    这样我们可以通过操作ajax引擎对象变相的实现在页面中显示新
    的响应资源。

    本质:

    js的DOM操作中的数据由程序员自己写死声明,变成从服务器动
    态的获取。

     

    展开全文
  • AJAX学习

    2010-05-19 14:36:48
  • AJAX 学习

    2017-07-09 21:33:49
    AJAX 实例背景最近的项目中大量地方需要使用 AJAX,无奈,谁叫我既要写前台又要写后台呢,只好学习下这个技术点,主要参考 W3school 文档,下面记录下这些知识点,便于日后自己查阅,下面的一些测试代码建议在 W3...

    背景

    最近的项目中大量地方需要使用 AJAX,无奈,谁叫我既要写前台又要写后台呢,只好学习下这个技术点,主要参考 W3school 文档,下面记录下这些知识点,便于日后自己查阅,下面的一些测试代码建议在 W3school 中测试。

    AJAX 基础:

    AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。

    AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。 在很多网站可以见到使用这种技术。

    AJAX - XMLHttpRequest

    • 创建 XMLHttpRequest 对象

    XMLHttpRequest 是 AJAX 的基础. XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    创建 XMLHttpRequest 对象的语法:

    variable = new XMLHttpRequest();

    但是对于老版本的 Internet Explorer (IE5 和 IE6)却是使用 ActiveX 对象,所以在开发中为了适应大多数的浏览器,常使用如下:

    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp = new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
      }
    • 向服务器发送请求

    使用 XMLHttpRequest 对象的 open() 和 send() 方法:

    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();
    method description
    open(method, url, async) 规定请求的类型、URL 以及是否异步处理请求。method:请求的类型;GET 或 POST url:文件在服务器上的位置 async:true(异步)或 false(同步)
    send(string) 将请求发送到服务器。string:仅用于 POST 请求

    GET 还是 POST?

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

    然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    示例:GET 请求

    1、简单的 GET 请求

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","/ajax/demo_get.asp?t=" + Math.random(),true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <div id="myDiv"></div>
    
    </body>
    </html>

    2、通过 GET 方法发送信息

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","/ajax/demo_get2.asp?fname=Bill&lname=Gates",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <div id="myDiv"></div>
    
    </body>
    </html>

    示例:POST 请求

    1、简单 POST 请求

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("POST","/ajax/demo_post.asp",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <div id="myDiv"></div>
    
    </body>
    </html>

    2、像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("POST","/ajax/demo_post2.asp",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    
    xmlhttp.send("fname=Bill&lname=Gates");
    }
    </script>
    </head>
    <body>
    
    <h2>AJAX</h2>
    <button type="button" onclick="loadXMLDoc()">请求数据</button>
    <div id="myDiv"></div>
    
    </body>
    </html>

    注意:setRequestHeader(header, value) 向请求添加 HTTP 头,header: 规定头的名称, value: 规定头的值。

    url - 服务器上的文件

    open() 方法的 url 参数是服务器上文件的地址:

    xmlhttp.open("GET","ajax_test.asp",true);

    该文件可以是任何类型的文件,比如 .txt 和 .xml,或者服务器脚本文件,比如 .asp 和 .php (在传回响应之前,能够在服务器上执行任务)。

    异步 - True or False ?

    XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true,对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

    通过 AJAX,JavaScript 无需等待服务器的响应,而是:

    • 在等待服务器响应时执行其他脚本
    • 当响应就绪后对响应进行处理

    Async = true

    当使用 async = true 时,请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }
    xmlhttp.open("GET","/ajax/test1.txt",true);
    xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
    
    </body>
    </html>

    Async = false

    如需使用 async = false,请将 open() 方法中的第三个参数改为 false

    不推荐使用 async = false,但是对于一些小型的请求,也是可以的。

    请记住,JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢,应用程序会挂起或停止。

    注释:当您使用 async=false 时,请不要编写 onreadystatechange 函数 - 把代码放到 send() 语句后面即可:

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.open("GET","/ajax/test1.txt",false);
    xmlhttp.send();
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>Let AJAX change this text</h2></div>
    <button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>
    
    </body>
    </html>
    • 服务器响应

    使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

    • responseText 获得字符串形式的响应数据。
    • responseXML 获得 XML 形式的响应数据。

    1、responseText 属性

    如果来自服务器的响应并非 XML,请使用 responseText 属性。

    responseText 属性返回字符串形式的响应,因此您可以这样使用:

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    2、responseXML 属性

    如果来自服务器的响应是 XML,而且需要作为 XML 对象进行解析,请使用 responseXML 属性:

    请求 books.xml 文件,并解析响应:

    <html>
    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    var xmlhttp;
    var txt,x,i;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        xmlDoc=xmlhttp.responseXML;
        txt="";
        x=xmlDoc.getElementsByTagName("title");
        for (i=0;i<x.length;i++)
          {
          txt=txt + x[i].childNodes[0].nodeValue + "<br />";
          }
        document.getElementById("myDiv").innerHTML=txt;
        }
      }
    xmlhttp.open("GET","/example/xmle/books.xml",true);
    xmlhttp.send();
    }
    </script>
    </head>
    
    <body>
    
    <h2>My Book Collection:</h2>
    <div id="myDiv"></div>
    <button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>
    
    </body>
    </html>
    • onreadystatechange 事件

    当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息。

    下面是 XMLHttpRequest 对象的三个重要的属性:

    • onreadystatechange 存储函数(或函数名),每当 readyState 属性改变时,就会调用该函数
    • readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
      • 0: 请求未初始化
      • 1: 服务器连接已建立
      • 2: 请求已接收
      • 3: 请求处理中
      • 4: 请求已完成,且响应已就绪
    • status
      • 200: “OK”
      • 404: 未找到页面

    在 onreadystatechange 事件中,我们规定当服务器响应已做好被处理的准备时所执行的任务。

    当 readyState 等于 4 且状态为 200 时,表示响应已就绪:

    xmlhttp.onreadystatechange=function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      }

    使用 Callback 函数

    callback 函数是一种以参数形式传递给另一个函数的函数。

    如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准 的函数,并为每个 AJAX 任务调用该函数。

    该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):

    function myFunction()
    {
    loadXMLDoc("ajax_info.txt",function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
    }

    AJAX - 高级

    ASP/PHP 请求实例 - AJAX 用于创造动态性更强的应用程序。

    AJAX 可用来与数据库进行动态通信。

    AJAX 可用来与 XML 文件进行交互式通信。

    AJAX 实例

    使用 XMLHttpRequest 对象的实例

    展开全文
  • ajax学习

    2017-08-30 17:04:21
    开始学习ajax,内容很少,跟着菜鸟教程做点笔记~(http://www.runoob.com/ajax/ajax-tutorial.html)1、什么是ajaxajax=异步JavaScript和XML,它用于创建快速动态网页。通过在后台与服务器进行少量数据交换,ajax...

    开始学习ajax,内容很少,跟着菜鸟教程做点笔记~(http://www.runoob.com/ajax/ajax-tutorial.html

    1、什么是ajax

    ajax=异步JavaScript和XML,它用于创建快速动态网页。通过在后台与服务器进行少量数据交换,ajax实现了不重载整个页面情况下对一个页面的某部分进行更新

    2、ajax实例代码(先看看代码,后面进行代码分析)

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <script>
    function loadXMLDoc()
    {
        var xmlhttp;
        if (window.XMLHttpRequest)
        {
            //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
            xmlhttp=new XMLHttpRequest();
        }
        else
        {
            // IE6, IE5 浏览器执行代码
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
        xmlhttp.send();
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    <button type="button" onclick="loadXMLDoc()">修改内容</button>
    
    </body>
    </html>

    3、ajax的工作原理

    其原理简单来说就是通过XmlHttpRequest对象来向服务器发异步请求,然后用js操作dom进行更新。其中的关键异步就是从服务器获得请求数据(这一关键的核心就是XMLHttpRequest)

    创建XmlHttpRequest对象
    所有现代浏览器均内建XMLHttpRequest对象,老版可能不支持。因此我们要如下代码进行创建:

    
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    

    4、向服务器发送请求

    如果要向服务器发送请求,我们使用XMLHttpRequest的open()和send()方法:

    xmlhttp.open("GET","ajax_info.txt",true);
    xmlhttp.send();

    这里写图片描述

    这里就写下第三个参数 Async:
    如果要想实现异步,第三个参数必须设置为true。且当其处于true时候,请规定在响应处 onreadeystatechange 事件中的就绪状态时执行的函数:

    
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    xmlhttp.send();
    

    5、服务器响应
    如需获得来自服务器的响应,新需要用XMLHttpRequest对象的responseText或responseXML属性
    这里写图片描述

    如果来自服务器的响应并非XML,就用responseText属性。它返回字符串形式的响应

    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

    6、onreadystatechange事件
    当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当readyState改变时,就会触发onreadystatechange事件。readyState属性存有XMLHttpRequest的状态信息。下面是XMLHttpRequest对象的三个重要属性:
    这里写图片描述

    展开全文
  • Ajax 学习

    2013-07-20 17:31:18
    AJAX(异步 JavaScript 和 XML)是 AsynchronousJavaScript and XML 的简称。 AJAX 不是一门新的编程语言,它是基于 JavaScript 的,是一种异步请求服务器的技术。 AJAX 可以与服务器交换数据,在不重新加载(刷新)...
  • ajax 学习

    2011-09-21 20:18:54
    function createAjax() { var request=false; //window 对象中有XMLHttpRequest存在 就是非ie,包括ie7,ie8 if(window.XMLHttpRequest) { request=new XMLHttpRequest(); if(request.overrid

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 21,729
精华内容 8,691
关键字:

ajax学习