AJAX基础学习
Posted 在路上的小阿亮
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX基础学习相关的知识，希望对你有一定的参考价值。
先写一下我从网上看到的描述：
AJAX = Asynchronous javascript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
Ajax 的核心是 JavaScript 对象 XMLHttpRequest。该对象在 Internet Explorer 5 中首次引入，它是一种支持异步请求的技术。简而言之，XMLHttpRequest使您可以使用 JavaScript 向服务器提出请求并处理响应，而不阻塞用户。
XMLHttpRequest 是 AJAX 的基础。
XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。
XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。
XMLHttpRequest的对象用于客户端和服务器之间的异步通信。
它执行以下操作：
在后台从客户端发送数据
从服务器接收数据
更新网页而不重新加载。
XMLHttpRequest对象的属性
XMLHttpRequest对象的常见属性如下：
| 属性 | 描述 |
|---|---|
| onreadystatechange |
存储函数（或函数名），每当readyState的属性改变时， 就会调用该函数。 |
| readyState | 存有的XMLHttpRequest的状态从0到4发生变化。 0：请求未初始化 1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪 |
| responseText | 以文本形式返回响应。 |
| responseXML | 以XML格式返回响应 |
| status |
将状态返回为数字（例如，“Not Found”为404，“OK”为200） |
| statusText |
以字符串形式返回状态（例如，“Not Found”或“OK”） |
XMLHttpRequest对象的方法
XMLHttpRequest对象的重要方法如下：
| 方法 | 描述 |
|---|---|
| abort() |
取消当前请求。 |
| getAllResponseHeaders() |
以字符串形式返回完整的HTTP标头集。 |
| getResponseHeader( headerName ) |
返回指定HTTP标头的值。 |
| void open（method，URL） | 打开指定获取或交的方法和URL的请求。 |
| void open（method，URL，async） | 与上面相同，但指定异步或不。 |
| void open（method，URL，async， userName，password） |
与上面相同，但指定用户名和密码。 |
| void send（content） | 发送获取请求。 |
| setRequestHeader（ label，value） |
将标签/值对添加到要发送的HTTP标头。 |
AJAX 使用的 XMLHttpRequest 的对象与服务器通信。让我们尝试通过下面显示的图像了解 AJAX 的流程或 AJAX 的工作原理。
向服务器发送请求
XMLHttpRequest 对象用于和服务器交换数据。
当你的页面全部加载完毕后，客户端会通过 XMLHttpRequest 对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。
如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的open()和send()方法：
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();| 方法 | 描述 |
|---|---|
| open(method,url,async) | 规定请求的类型、URL 以及是否异步处理请求。
|
| send(string) | 将请求发送到服务器。
|
| 方法 | 描述 |
|---|---|
| setRequestHeader(header,value) | 向请求添加 HTTP 头。
|
提示：POST请求的特点如下：
POST请求不会被缓存POST请求不会保留在浏览器历史记录中POST请求不能被收藏为书签POST请求对数据长度没有要求
url - 服务器上的文件
xmlhttp.open("GET","ajax_test.html",true); 该文件可以是任何类型的文件，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php（在传回响应之前，能够在服务器上执行任务）。
异步 - True 或 False？
AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。
XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的sync(async)参数必须设置为 true：
xmlhttp.open("GET","ajax_test.html",true);对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。
通过 AJAX，JavaScript 无需等待服务器的响应，而是：
在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理
下面是学习的一个小demo
页面上实时输入信息，存储到服务器上，同时显示在页面上。
服务器使用Apache2.4.39
数据库mysql5.7.26
环境集成软件 小皮
贴上html代码：
<html lang="en"><head><meta charset="UTF-8"><title>聊天室</title><style>div {width:500px;height:500px;background-color:#dedede;}</style><script src="index.js"></script></head><body><div id="con"></div><form action="" method=""><input type="text" name="username" size="10" id="uname"><input type="text" size="50" id="content"><input type="button" value="发送" id="btn"></form></body></html>
js代码：
document.write(new Date());//ajax模板请求语法function createXMLHttpRequest() {var request = false;if(window.XMLHttpRequest) {request = new XMLHttpRequest();if(request.overrideMimeType) {request.overrideMimeType('text/xml');}} else if(window.ActiveXObject) {var versions = ['Microsoft.XMLHTTP', 'MSXML.XMLHTTP', 'Microsoft.XMLHTTP', 'Msxml2.XMLHTTP.7.0', 'Msxml2.XMLHTTP.6.0', 'Msxml2.XMLHTTP.5.0', 'Msxml2.XMLHTTP.4.0', 'MSXML2.XMLHTTP.3.0', 'MSXML2.XMLHTTP'];for(var i=0; i<versions.length; i++) {try {request = new ActiveXObject(versions[i]);if(request) {return request;}} catch(e) {request=false;}}}return request;}document.write('<br>');//需要将获取对象放到事件中， 重新获取Ajax对象， 不至于有缓存。window.onload=function(){var btn = document.getElementById("btn");btn.onclick=function(){var ajax = createXMLHttpRequest();var unameobj = document.getElementById("uname");var uname = unameobj.value;var contentobj = document.getElementById("content");var content = contentobj.value;contentobj.value='';var mess="username="+uname+"&"+"content="+content;// alert(mess);//post请求ajax.open("post", "http://localhost/write.php", true);ajax.setRequestHeader("Content-Type", 'application/x-www-form-urlencoded');ajax.send(mess);}function getMess() {setInterval(function(){var ajax = createXMLHttpRequest();ajax.open("get", "http://localhost/read.php", true);ajax.send(null);ajax.onreadystatechange=function(){// alert("服务器有返回的动作");// console.log(ajax.readyState);if(ajax.readyState==4) {// alert('只执行一次');//console.log(ajax.status);//console.log(ajax.statusText);if(ajax.status==200) {document.getElementById("con").innerHTML=ajax.responseText;// alert(ajax.responseText);}}}},2000);}getMess();}
后台请求
ajax.open("post", "http://localhost/write.php", true);write.php
<?php$username = $_POST["username"];$content = $_POST["content"];$str = "<b>{$username}</b>(".date("Y/m/d H:i:s").")说: {$content}<br>";file_put_contents("message.txt", $str, FILE_APPEND);?>
后台请求
ajax.open("get", "http://localhost/read.php", true);read.php
echo file_get_contents("message.txt");
以上是关于AJAX基础学习的主要内容，如果未能解决你的问题，请参考以下文章