• AJAX简介


    AJAX简介

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

    AJAX 不是新的编程语言,而是一种使用现有标准的新方法。

    AJAX 是与服务器交换数据并更新部分网页的艺术,在不重新加载整个页面的情况下。

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4 <meta charset="utf-8">
     5 <script>
     6 function loadXMLDoc()
     7 {
     8     var xmlhttp;
     9     if (window.XMLHttpRequest)
    10     {
    11         //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    12         xmlhttp=new XMLHttpRequest();
    13     }
    14     else
    15     {
    16         // IE6, IE5 浏览器执行代码
    17         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    18     }
    19     xmlhttp.onreadystatechange=function()
    20     {
    21         if (xmlhttp.readyState==4 && xmlhttp.status==200)
    22         {
    23             document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    24         }
    25     }
    26     xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
    27     xmlhttp.send();
    28 }
    29 </script>
    30 </head>
    31 <body>
    32 
    33 <div id="myDiv"><h2>使用 AJAX 修改该文本内容</h2></div>
    34 <button type="button" onclick="loadXMLDoc()">修改内容</button>
    35 
    36 </body>
    37 </html>

    原来:

     

     myDiv的内容就被替换掉了

    Ajax(Asynchronous Javascript+XML)是一种以异步方式从服务器获取数据的技术,用户单击了一个链接,不用重新载入整个页面,也能够获取新的数据。

    创建XHR(XMLHttpRequest的简称)对象的时候,IE浏览器和非IE浏览器是不同的:

    var xhr;

    xhr = new ActiveXObject('Microsoft.XMLHTTP');   //IE浏览器

    xhr = new XMLHttpRequest();     //非IE浏览器

    open()函数

    eg.

    xhr.open("get","example.php",false);

    第一个参数:"get"、"post"等

    第二个参数:URL,相对于当前页面或绝对路径

    第三个参数:true/false,是否异步发送请求

    send()函数

    必须有一个参数,作为请求主体发送的数据,不需要通过请求主体发送数据必须传入null

    XHR对象的属性

    responseText:作为相应主体被返回的文本

    responseXML:如果响应内容是"text/xml"或"application/xml",这个属性中将保存包含着相应数据的XML文档,对于非XML数据,属性值为null

    status:响应的HTTP状态

    200-成功

    304-请求的资源没有被修改,可以使用浏览器缓存的版本

    statusText:HTTP的状态说明

    readyState:请求/响应过程中的当前活动阶段

    0-未初始化,尚未调用open()方法

    1-启动。已调用open()方法,尚未调用send()方法

    2-发送。已调用send()方法,还没收到响应

    3-接收。已接收到部分响应数据

    4-完成。已经全部接收

    只要readyState属性值发生改变,都会触发一次readyStatechange事件,触发函数例子:

    xhr.onreadystatechange = function(){do something...};

    abort()函数

    接收到响应之前用于取消异步请求

    下面的例子是跟着php100视频教程写的,这是个很好的学PHP的教程,视频可以到php100网站下载。

    这里用了3个文件:index.html , ajax.js , for.php

    点击index.html的链接,会触发ajax.js中的Fetch函数,然后ajax.js中的Fetch函数取到for.php中的数据之后,显示在index.html页面上。

  • 相关阅读:
    【ElasticSearch】02 查询操作
    【ElasticSearch】03 部署
    【Canal】01 入门 & Kafka模式
    【Maxwell】03 定向监听&全量输出
    【Hbase】1.3.1版本安装
    【Maxwell】01 安装及入门
    D④商品列表添加商品:商品图片,商品内容
    cleanlab去除噪声总方法code置信学习
    D③商品列表添加商品:路由跳转, steps步骤条,steps步骤条 与 tab栏区域 的绑定;tab栏每栏区域;表单输入类型是数字;表单名称在输入框上方;checkbox 带边框;upload上传组件
    Mysql查询当前时间或指定时间前12月的时间列表
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/7860837.html
Copyright © 2020-2023  润新知