原生Ajax

最新推荐文章于 2021-08-05 18:54:00 发布

帅老派

最新推荐文章于 2021-08-05 18:54:00 发布

阅读量228

点赞数

分类专栏： Web前端 JS Ajax 文章标签： JS 原生Ajax Web前端

本文链接：https://blog.csdn.net/qq_41820897/article/details/102412436

版权

Web前端同时被 3 个专栏收录

2 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

Ajax

2 篇文章 0 订阅

订阅专栏

ASynchronous JavaScript And XML :异步的JavaScript和XML
是指一种创建交互式网页应用的网页开发技术。是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。传统页面(不使用ajax)如果需要部分内容的更新，必须加载整个页面。

Ajax技术的主要作用：提升用户的体验。

1.异步和同步：建立在客户端和服务器相互通信的基础上理解同步异步：
在这里插入图片描述
对同步和异步进行通俗的解释的话，同步就是指在客户端浏览器发出请求后，在客户端接收到服务器的响应之前，客户端不可以进行其他操作。异步则是在客户端发出请求后在客户端接收到浏览器响应期间可以进行其他操作而不需要停止操作进行等待。

实现ajax的方式：
直接使用原生JS的情况不多，主要应用时还是使用JS的框架，但是学习任何框架的知识都是以基础为主的，所以原生的还是要掌握了解。
1.创建 XMLHttpRequest 对象：XMLHttpRequest是Ajax的基础，XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新，目前除了自己玩自己的IE5,IE6使用的是ActiveXObject外，所有的现代浏览器都支持XMLHttpRequest对象。所以为了应对所有现代浏览器，进行创建时要进行验证

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2.向服务器发送请求：向服务器发送请求我们使用的是XMLHttpRequest对象的open()和send()
xmlhttp.open(“GET”,“test1.txt”,true);
xmlhttp.send();
open()中有三个参数，method：请求的类型；GET或POST
url：文件所在服务器的位置
async：true(异步)或false(同步)

相比于POST请求，GET请求更快更高效，所以大部分情况下使用的get请求，但是如果无法使用缓存文件或者要想服务器发送大量数据，又或者为了数据的安全性，要选择POST请求，使用POST请求时，send()可以带一个String类型的参数用于传输数据。

3.获取服务器的响应:如果需要获取服务器的响应，需要使用XMLHttpRequest对象的responseText或者responseXML属性。
使用responseText获取字符串形式的响应，使用responseXML获取XML形式的响应。

                                    
 <html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/ajax/test1.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">通过 AJAX 改变内容</button>

</body>
</html>

3.onreadystatechange 事件：当请求发送到服务器是，我们需要执行一些基于响应的任务，当readyState改变时就会触发onreadystatechange事件。与onreadystatechange事件搭配使用的有两个XMLHttpRequest的属性：readyState和status
readyState：存有XMLHttpRequest的状态。从0到4发生变化
0：请求伟初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪。
status：
200：OK
404：未找到页面
在onreadystatechange事件中使用这两个属性对服务器响应是否就绪进行判断，从而确定是都执行响应。使用方法，在上一段代码已经展示了。

我的博客主要还是以回顾复习为主，要点主要是在W3school的，如要深入学习，直接去W3school上学习就可以。