AJAX
Posted 正儿八经学前端
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX相关的知识，希望对你有一定的参考价值。
长的好看的人都关注了
AJAX即 Asynchronous javascript And XML，AJAX 不是一门的新的语言，而是对现有技术的综合利用。 本质是在HTTP协议的基础上以异步的方式与服务器进行通信。
同步与异步
通俗来讲，同步指的就是事情要一件一件做，等做完前一件才能做后一件任务。异步则不受当前任务的影响，两件事情同时进行，做一件事情时，不影响另一件事情的进行。
网页异步应用：
1. 验证你的用户名是否已经存在（失去焦点后获取你的信息，和后台比对）。
2. 百度搜索提示，及相关内容展示（一边输入，一边找出了你可能要的内容）。
3. 新浪微博评论（异步加载）。
XMLHttpRequest构造函数
AJAX中的XMLHttpRequest构造函数可以以异步的方式处理程序，用于与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。这个请求是异步，即在往服务器发送请求时，并不会阻碍程序的运行，浏览器会继续渲染后续的结构。
发送GET请求
//使用XMLHttpRequest发送get请求的步骤//1. 创建一个XMLHttpRequest对象var xhr = new XMLHttpRequest();//2. 设置请求行//第一个参数:请求方式 get/post//第二个参数:请求的地址 需要在url后面拼上参数列表xhr.open("get", "08.php?name=wy");//3. 设置请求头//浏览器会给我们默认添加基本的请求头,get请求时无需设置//4. 设置请求体//get请求的请求体为空,因为参数列表拼接到url后面了xhr.send(null);
发送POST请求
//使用XMLHttpRequest发送post请求的步骤//1. 创建一个XMLHttpRequest对象var xhr = new XMLHttpRequest();//2. 设置请求行//第一个参数:请求方式 get/post//第二个参数:请求的地址，不需要拼参数，因为参数在请求体中xhr.open("post", "09.php");//3. 设置请求头, post请求必须设置content-type,不然后端无法获取到数据xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");//4. 设置请求体xhr.send("name=wy&age=17");
获取响应
//给xhr注册一个onreadystatechange事件，当xhr的状态发生状态发生改变时，会触发这个事件。xhr.onreadystatechange = function () {// readyState的值为4表示响应已完成if(xhr.readyState === 4){//1. 获取状态行console.log("状态行:"+xhr.status);//2. 获取响应头console.log("所有的相应头:"+xhr.getAllResponseHeaders());console.log("指定相应头:"+xhr.getResponseHeader("content-type"));//3. 获取响应体console.log(xhr.responseText);}}
案例：判断用户名是否已存在
$arr = ['wy', 'wangyang', 'citizenp'];$username = $_GET['username'];// 判断$username在数组中是否存在if (in_array($username, $arr)) {echo 'yes';} else {echo 'no';}
<input type="text" placeholder="请输入用户名" /> <span></span><script>// 当input框失去焦点的时候，发送ajax请求，把username给服务器，获取服务器的结果var input = document.querySelector('input')var span = document.querySelector('span')input.onblur = function() {var username = this.value//1. 创建对象var xhr = new XMLHttpRequest()//2. 设置请求// 请求行 get请求的参数拼到url的后面xhr.open('get', '07.php?username=' + username)// 请求头不管// 发送请求体xhr.send(null)//3. 获取响应xhr.onreadystatechange = function() {if (xhr.readyState === 4) {// console.log(xhr.responseText)if (xhr.responseText === 'yes') {// 用户名存在了span.innerText = '用户名已经存在'span.style.color = 'red'} else {span.innerText = '✔'span.style.color = 'green'}}}}</script>
案例：聊天机器人
header('content-type:text/html;charset=utf-8');$results = array("吃了没","我们不约！！！","爱过","你今天长得好帅","这你也信？","曾经有一份真挚的爱情摆在我面前，我却没有珍惜","情不知所以，一往而深","陪伴是最长情的告白");//array_rand :随机获取数组中的一个下标$random = array_rand($results, 1);sleep(1);echo $results[$random];
<body><h3>简单的Ajax实例</h3><div class="chatbox"><!-- 聊天内容 --><div class="messages"><div class="self"><h5>我说</h5><p>你好</p></div><div class="other"><h5>对方说</h5><p>你好</p></div></div><div class="form"><div class="input"><textarea></textarea></div><div class="btn"><input type="button" value="发送" /></div></div></div><script>// 1. 给按钮注册点击事件// 2. 获取文本域的value值// 3. 动态生成一个div, 添加一个类名 self// 4. 添加到message中// 5. 发送ajax请求， 把自己的消息发给服务器// 6. 获取到服务器的响应数据// 7. 动态创建一个div，添加类名 other// 8. 添加到message中var btn = document.querySelector('.btn input')var textarea = document.querySelector('.input textarea')var messages = document.querySelector('.messages')// 输入内容为空，不做任何处理btn.onclick = function() {var content = textarea.value.trim()textarea.value = ''if (!content) {return}// 动态创建一个自己的divvar div = document.createElement('div')messages.appendChild(div)div.className = 'self'div.innerHTML = '<h5>我说</h5><p>' + content + '</p>'// 让div滚动到可视区div.scrollIntoView()// 发送ajax请求 ，把 msg传过去var xhr = new XMLHttpRequest()xhr.open('post', '05.php')xhr.setRequestHeader('content-type','application/x-www-form-urlencoded')xhr.send('msg=' + content)// 拿到响应，动态创建divxhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var div = document.createElement('div')messages.appendChild(div)div.className = 'other'div.innerHTML = '<h5>对方说</h5><p>' + xhr.responseText + '</p>'// 让div滚动到可视区div.scrollIntoView()}}}textarea.onkeydown = function(e) {if (e.keyCode === 13 && e.ctrlKey) {btn.onclick()}}</script></body>
听说关注了我们的人
都升职加薪啦
以上是关于AJAX的主要内容，如果未能解决你的问题，请参考以下文章