ajax&json-w3school（2020.2.12）【js ajax】

最新推荐文章于 2020-08-28 00:56:27 发布

mus_木司

最新推荐文章于 2020-08-28 00:56:27 发布

阅读量380

点赞数

分类专栏： w3cschool笔记文章标签： js ajax xmlhttprequest

本文链接：https://blog.csdn.net/mus123/article/details/104288165

版权

w3cschool笔记专栏收录该内容

35 篇文章 0 订阅

订阅专栏

一、js ajax
（一）ajax简介
1.AJAX 并不是编程语言。
AJAX 是一种从网页访问 Web 服务器的技术。
AJAX 代表异步 JavaScript 和 XML。
Ajax 允许通过与场景后面的 Web 服务器交换数据来异步更新网页。这意味着可以更新网页的部分，而不需要重新加载整个页面。
AJAX能够：
·不刷新页面更新网页
·在页面加载后从服务器请求数据
·在页面加载后从服务器接收数据
·在后台向服务器发送数据

2.实例

<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">修改内容</button>
</div>
<script>
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML =
      this.responseText;
    }
  };
  xhttp.open("GET", "/example/js/ajax_info.txt", true);
  xhttp.send();
}
</script>
</body>
</html>

这张 HTML 页面包含一个 <div> 和一个 <button>。
<div> 用于显示来自服务器的信息。
<button> 调用函数（当它被点击）。
该函数从 web 服务器请求数据并显示它
3. AJAX 如何工作

.网页中发生一个事件（页面加载、按钮点击）
. 由 JavaScript 创建 XMLHttpRequest 对象
. XMLHttpRequest 对象向 web 服务器发送请求
. 服务器处理该请求
. 服务器将响应发送回网页
. 由 JavaScript 读取响应
. 由 JavaScript 执行正确的动作（比如更新页面）
（二）XMLHttpRequest 对象
1.所有现代浏览器都支持 XMLHttpRequest 对象。
XMLHttpRequest 对象用于同幕后服务器交换数据。这意味着可以更新网页的部分，而不需要重新加载整个页面。
2. 创建 XMLHttpRequest 的语法是：

variable = new XMLHttpRequest();

为了应对所有浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，创建 XMLHttpRequest 对象，如果不支持，则创建 ActiveX 对象：

var xhttp;
if (window.XMLHttpRequest) {
    xhttp = new XMLHttpRequest();
    } else {
    // code for IE6, IE5
     xhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

3.出于安全原因，现代浏览器不允许跨域访问。
这意味着尝试加载的网页和 XML 文件都必须位于相同服务器上。
4.
在这里插入图片描述
5.
（三）ajax向服务器发送请求

1.如需向服务器发送请求，我们使用 XMLHttpRequest 对象的 open() 和 send() 方法：

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

在这里插入图片描述
2. GET 还是 POST？
GET 比 POST 更简单更快，可用于大多数情况下。
不过，请在以下情况始终使用 POST：
• 缓存文件不是选项（更新服务器上的文件或数据库）
• 向服务器发送大量数据（POST 无大小限制）
• 发送用户输入（可包含未知字符），POST 比 GET 更强大更安全
3. 一条简单的 GET 请求：

xhttp.open("GET", "demo_get.asp", true);
xhttp.send();

在上面的例子中，您可能会获得一个缓存的结果。为了避免此情况，请向 URL 添加一个唯一的 ID：

xhttp.open("GET", "demo_get.asp?t=" + Math.random(), true);
xhttp.send();

如果您需要用 GET 方法来发送信息，请向 URL 添加这些信息：

xhttp.open("GET", "demo_get2.asp?fname=Bill&lname=Gates", true);
xhttp.send();

4.一条简单的 POST 请求：

xhttp.open("POST", "demo_post.asp", true);
xhttp.send();

如需像 HTML 表单那样 POST 数据，请通过 setRequestHeader() 添加一个 HTTP 头部。请在 send() 方法中规定您需要发送的数据：

xhttp.open("POST", "ajax_test.asp", true);
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");

setRequestHeader(header, value)向请求添加 HTTP 头部
• header：规定头部名称
• value：规定头部值
5. url - 服务器上的文件
open() 方法的 url 参数，是服务器上文件的地址：

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

该文件可以是任何类型的文件，如 .txt 和 .xml，或服务器脚本文件，如 .asp 和 .php（它们可以在发送回响应之前在服务器执行操作）。
6. 如需异步发送请求，open() 方法的 async 参数必须设置为 true：

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

发送异步请求对 web 开发人员来说是一个巨大的进步。服务器上执行的许多任务都非常耗时。在 AJAX 之前，此操作可能会导致应用程序挂起或停止。
通过异步发送，JavaScript 不必等待服务器响应，而是可以：
• 在等待服务器响应时执行其他脚本
• 当响应就绪时处理响应
7. onreadystatechange 属性
通过 XMLHttpRequest 对象，您可以定义当请求接收到应答时所执行的函数。
这个函数是在 XMLHttpResponse 对象的 onreadystatechange 属性中定义的

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

8.同步请求
如需执行同步的请求，请把 open() 方法中的第三个参数设置为 false：
xhttp.open(“GET”, “ajax_info.txt”, false);
有时 async = false 用于快速测试。你也会在更老的 JavaScript 代码中看到同步请求。
由于代码将等待服务器完成，所以不需要 onreadystatechange 函数：

xhttp.open("GET", "ajax_info.txt", false);
xhttp.send();
document.getElementById("demo").innerHTML = xhttp.responseText;

不推荐同步的 XMLHttpRequest (async = false)，因为 JavaScript 将停止执行直到服务器响应就绪。如果服务器繁忙或缓慢，应用程序将挂起或停止。现代开发工具被鼓励对使用同步请求做出警告，并且当这种情况发生时，可能会抛出 InvalidAccessError 异常。
（四）ajax服务器响应
1.onreadystatechange 属性
readyState 属性存留 XMLHttpRequest 的状态。
onreadystatechange 属性定义当 readyState 发生变化时执行的函数。
status 属性和 statusText 属性存有 XMLHttpRequest 对象的状态。
每当 readyState 发生变化时就会调用 onreadystatechange 函数。
当 readyState 为 4，status 为 200 时，响应就绪：

function loadDoc() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("demo").innerHTML =
            this.responseText;
       }
    };
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send(); 
}

注释：onreadystatechange 被触发五次（0-4），每次 readyState 都发生变化。
2. 回调函数是一种作为参数被传递到另一个函数的函数。
如果您的网站中有多个 AJAX 任务，那么您应该创建一个执行 XMLHttpRequest 对象的函数，以及一个供每个 AJAX 任务的回调函数。
该函数应当包含 URL 以及当响应就绪时调用的函数。

<!DOCTYPE html>
<html>
<body>

<div id="demo">

<h1>XMLHttpRequest 对象</h1>

<button type="button" onclick="loadDoc('/example/js/ajax_info.txt', myFunction)">更改内容
</button>
</div>

<script>
function loadDoc(url, cFunction) {
  var xhttp;
  xhttp=new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      cFunction(this);
    }
  };
  xhttp.open("GET", url, true);
  xhttp.send();
}
function myFunction(xhttp) {
  document.getElementById("demo").innerHTML =
  xhttp.responseText;
}
</script>
</body>
</html>

可以写myFunction2()等来执行其他的事件回调
3.
在这里插入图片描述
（1）responseText 属性以 JavaScript 字符串的形式返回服务器响应，因此您可以这样使用它：

document.getElementById("demo").innerHTML = xhttp.responseText;

XML HttpRequest 对象有一个內建的 XML 解析器。
（2）ResponseXML 属性以 XML DOM 对象返回服务器响应。
使用此属性，您可以把响应解析为 XML DOM 对象

xmlDoc = xhttp.responseXML;
txt = "";
x = xmlDoc.getElementsByTagName("ARTIST");
for (i = 0; i < x.length; i++) {
  txt += x[i].childNodes[0].nodeValue + "<br>";
  }
document.getElementById("demo").innerHTML = txt;
xhttp.open("GET",  "music_list.xml", true);
xhttp.send();

在这里插入图片描述
（1）getAllResponseHeaders() 方法返回所有来自服务器响应的头部信息。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getAllResponseHeaders();
  }
};

getAllResponseHeaders() 函数返回资源的所有头信息，如长度，服务器类型，内容类型，最后修改等：

date: Wed, 12 Feb 2020 03:24:41 GMT etag: “79dac03a2e11d51:0”
last-modified: Thu, 23 May 2019 06:10:32 GMT server:
Microsoft-IIS/10.0 x-powered-by: ASP.NET content-type: text/plain
status: 304 cache-control: no-cache,no-cache accept-ranges: bytes
content-length: 163

（2）getResponseHeader() 方法返回来自服务器响应的特定头部信息。

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
  if (this.readyState == 4 && this.status == 200) {
    document.getElementById("demo").innerHTML = this.getResponseHeader("Last-Modified");
  }
};
xhttp.open("GET", "ajax_info.txt", true);
xhttp.send();

getResponseHeader() 函数返回资源的特定头信息，如长度，服务器类型，内容类型，最后修改等：

最后修改时间：Thu, 23 May 2019 06:10:32 GMT

（五）ajax xml实例
1.AJAX 可用于同 XML 文件进行交互式通信。
2. 当用户点击“获取 CD 信息”按钮时，执行 loadDoc() 函数。
loadDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并向服务器发送请求。
当服务器响应就绪后，构建 HTML 表格，从 XML 文件提取节点（因素），最后使用由 XML 数据填充的 HTML 表格对元素“demo”进行更新：

function loadDoc() {
  var xhttp = new XMLHttpRequest();
   xhttp.onreadystatechange = function() {
    if (this.readyState  == 4 && this.status == 200) {
    myFunction(this);
     }
  };
  xhttp.open("GET", "music_list.xml", true);
  xhttp.send();
}
function myFunction(xml) {
  var i;
  var xmlDoc = xml.responseXML;
  var table="<tr><th>艺术家</th><th>曲目</th></tr>";
  var x = xmlDoc.getElementsByTagName("TRACK");
  for (i = 0; i <x.length;  i++) { 
    table += "<tr><td>" +
    x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue  +
    "</td><td>" +
    x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue  +
    "</td></tr>";
  }
   document.getElementById("demo").innerHTML = table;
}

"music_list.xml"

<?xml version="1.0" encoding="utf-8"?>
<CATALOG>
<TRACK>
<TITLE>再见</TITLE>
<ARTIST>邓紫棋</ARTIST>
<ALBUM>新的心跳</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>邓紫棋工作室</COMPANY>
<YEAR>2016</YEAR>
</TRACK>

<TRACK>
<TITLE>All I Ask</TITLE>
<ARTIST>Adele</ARTIST>
<ALBUM>25</ALBUM>
<COUNTRY>英国</COUNTRY>
<COMPANY>XL Recordings</COMPANY>
<YEAR>2015</YEAR>
</TRACK>

<TRACK>
<TITLE>之乎者也</TITLE>
<ARTIST>罗大佑</ARTIST>
<ALBUM>青春舞曲</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>滚石唱片</COMPANY>
<YEAR>1982</YEAR>
</TRACK>

<TRACK>
<TITLE>Never Be Alone</TITLE>
<ARTIST>Shawn Mendes</ARTIST>
<ALBUM>Handwritten</ALBUM>
<COUNTRY>加拿大</COUNTRY>
<COMPANY>环球唱片</COMPANY>
<YEAR>2015</YEAR>
</TRACK>

<TRACK>
<TITLE>慢慢</TITLE>
<ARTIST>张学友</ARTIST>
<ALBUM>忘记你我做不到</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>环球唱片</COMPANY>
<YEAR>1996</YEAR>
</TRACK>

<TRACK>
<TITLE>Complicated</TITLE>
<ARTIST>Avril Lavigne</ARTIST>
<ALBUM>Let Go</ALBUM>
<COUNTRY>加拿大</COUNTRY>
<COMPANY>索尼音乐</COMPANY>
<YEAR>2002</YEAR>
</TRACK>

<TRACK>
<TITLE>三生三世</TITLE>
<ARTIST>张杰</ARTIST>
<ALBUM>三生三世十里桃花</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>仁溪音乐</COMPANY>
<YEAR>2018</YEAR>
</TRACK>

<TRACK>
<TITLE>Five Hundred Miles</TITLE>
<ARTIST>Justin Timberlake</ARTIST>
<ALBUM>Inside Llewyn Davis</ALBUM>
<COUNTRY>美国</COUNTRY>
<COMPANY>华纳唱片</COMPANY>
<YEAR>2013</YEAR>
</TRACK>

<TRACK>
<TITLE>演员</TITLE>
<ARTIST>薛之谦</ARTIST>
<ALBUM>绅士</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>海蝶音乐</COMPANY>
<YEAR>2016</YEAR>
</TRACK>

<TRACK>
<TITLE>Numb</TITLE>
<ARTIST>Linkin Park</ARTIST>
<ALBUM>Meteora</ALBUM>
<COUNTRY>美国</COUNTRY>
<COMPANY>华纳唱片</COMPANY>
<YEAR>2003</YEAR>
</TRACK>

<TRACK>
<TITLE>给未来的自己</TITLE>
<ARTIST>梁静茹</ARTIST>
<ALBUM>崇拜</ALBUM>
<COUNTRY>马来西亚</COUNTRY>
<COMPANY>相信音乐</COMPANY>
<YEAR>2007</YEAR>
</TRACK>

<TRACK>
<TITLE>The Monster</TITLE>
<ARTIST>Rihanna</ARTIST>
<ALBUM>The Marshall Mathers LP2</ALBUM>
<COUNTRY>巴巴多斯</COUNTRY>
<COMPANY>环球唱片</COMPANY>
<YEAR>2013</YEAR>
</TRACK>

<TRACK>
<TITLE>我终于失去了你</TITLE>
<ARTIST>赵传</ARTIST>
<ALBUM>我终于失去了你</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>滚石唱片</COMPANY>
<YEAR>1989</YEAR>
</TRACK>

<TRACK>
<TITLE>Main Titles</TITLE>
<ARTIST>Ramin Djawadi</ARTIST>
<ALBUM>Game of Thrones</ALBUM>
<COUNTRY>德国</COUNTRY>
<COMPANY>索尼音乐</COMPANY>
<YEAR>2011</YEAR>
</TRACK>

<TRACK>
<TITLE>传奇</TITLE>
<ARTIST>李健</ARTIST>
<ALBUM>似水流年</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
<YEAR>2003</YEAR>
</TRACK>

<TRACK>
<TITLE>完美生活</TITLE>
<ARTIST>许巍</ARTIST>
<ALBUM>时光漫步</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>金牌大风</COMPANY>
<YEAR>2002</YEAR>
</TRACK>
</CATALOG>

（六）ajax php、asp实例
Windows 10 中IIS安装和配置PHP的步骤https://www.cnblogs.com/ydwzhang/p/11103482.html
1.AJAX 用php创建更具交互性的应用程序。
2.AJAX PHP、asp 实例
下面的例子演示：当用户在输入字段中键入字符时，网页如何与 web 服务器进行通信：
在这里插入图片描述
例子解释：
在上面的例子中，当用户在输入字段中键入字符时，会执行名为 “showHint()” 的函数。
此函数被 onkeyup 事件触发。
下面是 HTML 代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
    <h1>XMLHttpRequest 对象</h1>
    <h2>请在下面的输入字段中键入字母 A-Z：</h2>
    <p>搜索建议：<span id="txtHint"></span></p>
    <p>姓名：<input type="text" id="txt1" onkeyup="showHint(this.value)"></p>
    <input type="radio" name="check" value="php" checked onchange="Getrv()">php
    <input type="radio" name="check" value="asp" onchange="Getrv()">asp
    <script>
        window.onload = Getrv;
        var rv;

        function Getrv() {
            rv = document.getElementsByName("check")[0].checked ? "php" : "asp";
            console.log(rv);
        }

        function showHint(str) {
            var xhttp;
            if (str.length == 0) {
                document.getElementById("txtHint").innerHTML = "";
                return;
            }
            xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    console.log(xhttp);
                    document.getElementById("txtHint").innerHTML = this.responseText;
                }
            };
            if (rv == "asp") xhttp.open("GET", "gethint.asp?q=" + str, true);
            else xhttp.open("GET", "gethint.php?q=" + str, true);
            xhttp.send();
        }
    </script>

</body>

</html>

首先，检查输入字段是否为空（str.length == 0），如果是，清空 txtHint 占位符的内容并退出函数。
不过，如果输入字段不为空，则进行如下：
• 创建 XMLHttpRequest 对象
• 创建当服务器响应就绪时执行的函数
• 发送请求到服务器上的 PHP 文件（gethint.php）或asp文件
• 请注意添加到q 参数
• str 变量保存了输入字段的内容
3.如果碰到数据库，其实现主要依靠asp或php等服务器语言，此处不作解释。