大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。
今天给大家分享一下，修真院官网js任务4，深度思考中的知识点——什么是ajax
一.背景介绍
在 2005 年，Google 通过其 Google Suggest 使 AJAX 变得流行起来。Google Suggest 使用 AJAX 创造出动态性极强的 web 界面：当我们在谷歌的搜索框输入关键字时，JavaScript 会把这些字符发送到服务器，然后服务器会返回一个搜索建议的列表。
AJAX的全称是： Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）
AJAX不是编程语言 是一种无需重载整个网页的情况下与服务器交换数据并更新部分网页的技术
二.知识剖析
2.1同步和异步
同步
传统的网页(没有使用ajax的网页)，想要更新内容或者提交一个表单，必须重载整个网页
异步
页面上的操作与服务器端的操作互相之间不会造成堵塞
比如说在填写表单的时候不小心填写错误 错误信息会实时的显示在页面上 这个过程不会有整个页面的刷新 也不会有个整个页面的提交和等待
2.2XMLHttpRequest
xhr对象是ajax的基础 在xhr对象没有出现之前 网页开发采用的都是同步的方式 有了xhr对象之后 才可以进行异步的操作
一个典型的xhr建立一个ajax异步请求的过程大概就是这样
var request = new XMLHttpRequest();//新建一个xhr对象
request.open('GET','DEMO.php',true);//调用xhr对象的post方法
request.send();//将请求发送到服务器
request.onreadystatechange=function(){//对这个请求过程进行监听 并作出判断
if (request.readyState==4 && request.status==200)
{
document.getElementById("myDiv").innerHTML=request.responseText;
}
}
我们可以把这段代码拆分一下 看看open(),send()是什么意思.
open(method,url,async),send()是xhr对象向服务器发送请求的两个方法 open里面有3个参数 规定请求的类型、URL 以及是否异步处理请求。method：请求的类型；GET 或 POST url：文件在服务器上的位置 async：true（异步）或 false（同步）
三.常见问题
使用post提交的时候没有添加请求头信息
四.解决方案
在post和send之间加上content-Type: application/x-www-form-urlencoded
五.编码实战
六.拓展思考
readyState值说明
状态0，未初始化，表明对象已经建立，但未初始化，也就是尚未调用Oen方法创建Http请求。
状态1，初始化，表明对象已经建立，但是未调用send方法发送Http请求
状态2，发送数据，表明send方法已经被调用，但是当前的状态以及Http头未知。
状态3，数据传送中，表明服务器已经接受部分数据，因为响应时间以及Http头补全，这时通过 response系列方法获取部分数据会出现错误
状态4，传送完成，数据接收完毕，此时可以通过response系列方法获取完整的回应数据。
七.参考文献
https://www.w3cschool.cn/ajax/
八.更多讨论
1.get（）与post（）的区别是什么？
与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。
然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
2.如何将数据发送到服务器？
如果需要像 HTML 表单那样 POST 数据，使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定要发送的数据
3.jq的ajax是如何实现的？
jQuery load() 方法是简单但强大的 AJAX 方法。
load() 方法从服务器加载数据，并把返回的数据放入被选元素中。
网友评论