zoukankan      html  css  js  c++  java
  • ajax基础1

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

    AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新,即可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    通过 jQuery AJAX 方法,您能够使用 HTTP Get 和 HTTP Post 从远程服务器上请求文本、HTML、XML 或 JSON - 同时您能够把这些外部数据直接载入网页的被选元素中。

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

    创建 XMLHttpRequest 对象(XMLHttpRequest 对象用于和服务器交换数据。)的语法:

    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();

    请使用 POST 请求:

    无法使用缓存文件(更新服务器上的文件或数据库)

    向服务器发送大量数据(POST 没有数据量限制)

    发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠。

    一个简单的get请求:

    <html>

    <head>

             <script type="text/javascript">

              var xmlhttp;

              if(window.XMLHttpRequest){

                     xmlhttp=new XMLHttpRequest();

              }

              else{

                     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

              }

              xmlhttp.onreadystatechange=function(){

                     if(xmlhttp.readyState==4&&xmlstatus==200){

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

                     }

              }

              xmlhttphttp.open("GET","/ajax/demo_get.asp",true);

              xmlhttp.send();

             </script>

    </head>

    <body>

             <h2>AJAX</h2>

             <button type="button" onclick="loadXMLDoc()">请求数据</button>

             <div id="myDiv"></div>

    </body>

    </html>

    一个简单的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>

    Ps:

    如果需要像 HTML 表单那样 POST 数据,使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定希望发送的数据:

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

    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

    xmlhttp.send("fname=Bill&lname=Gates");

    url - 服务器上的文件

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

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

    XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true:

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

    服务器响应

    如需获得来自服务器的响应,请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性。

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

    onreadystatechange 事件

    当请求被发送到服务器时,我们需要执行一些基于响应的任务。每当 readyState 改变时,就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息,从0到4。0: 请求未初始化;1: 服务器连接已建立;2: 请求已接收;3: 请求处理中;4: 请求已完成,且响应已就绪。 Statu s:200表示ok,404表示未找到页面。

    宝剑锋从磨砺出,梅花香自苦寒来。
  • 相关阅读:
    【情人节礼物】纯js脚本打造精美3D玫瑰
    程序员成长系列(一):手里必须有一套自己的框架
    从灌篮高手谈项目团队组成
    【java下午茶】12306的双人票
    从怀孕编程谈公司管理
    程序员的灵光一闪
    【java下午茶系列】java三重奏之封装
    程序员的每周工作40小时之路
    程序员真适合自由的环境吗
    程序员真的需要升职吗?
  • 原文地址:https://www.cnblogs.com/haimengqingyuan/p/6081222.html
Copyright © 2011-2022 走看看