Ajax: Asynchronous javaScript and xml (异步的JavaScript和xml技术)。当我们向服务器发起请求的时候,服务器不会像浏览器响应整个页面,而是只有局部刷新。它是一个异步请求。 请求:
同步请求:只有当一次请求完全结束以后才能够发起另一次请求。
异步请求:不需要其他请求结束就可以向服务器发起请求。
Ajax的优点:
1、ajax是异步请求,浏览器页面只需要进行局部刷新,效率非常的高。
不足的地方:
1、因为ajax是异步请求,所以会导致请求服务器的次数大大增加,增加服务器的负担。
2、因为ajax使用的是JavaScript来接收服务器响应的数据。而JavaScript对浏览器的兼容性不太好。所以有时候对不同的浏览器进行区别对待。但是该问题可以通过jquery来解决。
<!-- get和post 实战用法的区别 -->
<!-- 1、get 会把参数放在url上显示 所以不安全 -->
<!-- 2、post 不会把参数显示到url上 登录的时候推荐使用psot -->
<!-- 3、get 传输的数据有限制 2kb 只支持 ASCII 字符 -->
<!-- 4、post 传输没有大小限制,没有限制,也允许二进制数据
传输文件 或者 图片的时候 使用post请求 -->
<!-- form表单提交数据 是会把整个页面进行刷新 重新加载整个网页 -->
<form action="" method="post">
密码:<input type="password" name="password">
<input type="submit" value="submit">
</form>
<br>
<button onclick="ajaxFn()">ajax获取数据</button>
<script>
function ajaxFn() {
/* Ajax 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术
局部更新
*/
/* 创建Ajax的步骤 */
\
/* 第一步 创建Ajax对象 */
/* new一个XMLHttpRequest的实例化对象 */
let xhr = new XMLHttpRequest();
console.log(xhr)
\
\
/* 第二部 连接到服务器 */
/*
open(方法,文件名,同步异步)
参数一:post/get
参数二:请求的文件名
参数三:同步(false) 异步(true)
*/
\
/* 获取文件的数据一定要使用异步 */
/* 读取文件需要时间 */
xhr.open('get', 'abc.txt', true)
\
/* 第三步 发送请求 */
xhr.send();
\
/* 第四步 接收返回值 */
/* 监听返回值 */
/* onreadystatechange就是用来监听readyState值的变化的 */
xhr.onreadystatechange = function () {
/* xhr.responseText 通过ajax请求获得的数据 */
console.log(xhr.responseText)
}
/* 使用live server 打开页面 */
}
\
/* 同步异步区别 */
/*
同步交互:指发送一个请求,需要等待返回,然后才能够发送下一个请求,有个等待过程
异步交互:指发送一个请求,不需要等待返回,随时可以再发送下一个请求,即不需要等待
\
*/
\
\
\
</script>