前端网络——Ajax使用

2020-04-16 20:39:22 阅读：207 来源： 互联网

标签：xmlhttp 请求前端 Ajax send 网络 ajax new 浏览器

AJAX是什么？

AJAX 可以用于创建快速动态的网页。
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
ajax(Asynchronous javaScript and XML 异步的javascript和xml)可实现异步，局部的获取数据

Ajax咋刚开始一看还有点稀里糊涂的，怎么去理解呢？
这是开发者已经订好的规则，我们只要记住固定的代码，就可以使用，只是这个固定的代码片段有点长而已

开始了,下面这一堆就是规定的代码：

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {//代码适应IE7以上浏览器
  xmlhttp=new XMLHttpRequest();
  }
else
  {//代码适应IE7一下浏览器
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","/statics/demosource/ajax_info.txt",true);
xmlhttp.send();
}
</script>

可能你还是有点恍惚，我们一行一行来解释：

Ajax的步骤>

(1) web浏览器
（2）ajax对象
（3）监控数据
（4）初始化HTTP请求参数（请求方式，地址，同步异步）
（5）发送请求

(1)web浏览器 基于浏览器，这一步你已经实现，没人不会在自己的电脑上不装浏览器，对吧？

function loadXMLDoc()
{
//**（2）ajax对象**
//定义一个变量用来接收请求，
//判断浏览器的版本适合哪种ajax对象创建，
//判断结束后，
//创建ajax对象，
//从XMLHttpREquest()新建一个对象出来，
var xmlhttp;
	//如果请求为真，用下面的代码适应IE7以上浏览器
if (window.XMLHttpRequest)
  {
	  //new一个请求，赋值给刚才定义的变量
  xmlhttp=new XMLHttpRequest();
  }
	
	//如果请求为假，可能是IE7以下浏览器，用下面的代码适应IE7以下浏览器
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
	
//触发ajax响应后执行动作
xmlhttp.onreadystatechange=function()
  {
	//如果xmlhttp的状态为4，且状态码为200,表示连接正常
	//说到状态和状态码，我们这里来详细解释下
	readyState五种状态>>>>>>>
	/*----------------------------------------------
	0-（未初始化）还没有调用send()方法
	1-（载入）已调用send()方法，正在发送请求
	2-（载入完毕）send()方法执行完毕，已经接受到全部响应内容
	3-（交互）正在解析响应内容
	4-（完成）响应内容解析完成，可以在客户端调用了

HTTP状态码
	100:信息类，表示web浏览器请求，正在进一步的处理
	200：成功，表示用户请求被正确接收正在进一步的处理中200 ok
	300：表示请求没有成功，客户端必须采取进一步的动作
	400：客户端错误，表示客户端提交的请求有错误，例如：404 NOT Found
	意味着请求中所引用的文档不存在
	500：服务器错误，表示服务器不能完成对请求的处理，如500
	-------------------------------------------------*/
//（3）监控数据
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
		//执行动作，将远程文件的文本赋给指定网页内容
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
//（4）初始化HTTP请求参数（请求方式，地址，同步异步）
//以GET形式打开文件
xmlhttp.open("GET","https://www.sharingark.xyz/important_setting/notice_info/SagaswWantSay/sagasw.txt",true);
//打开的文件发送到用户端，也就是你触发ajax效果后的屏幕前
//（5）发送请求
xmlhttp.send();
}
</script>

文本内容：

重要的事情只说一遍：
如果在本地测试，请开启wamp在本地模拟浏览器环境

以上就是ajax的应用，这只是get请求，还有一种是post请求的，大体代码一样，除了请求部分不同以外，详情请参考

<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
  xmlhttp=new XMLHttpRequest();
  }
else
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
//主要是这一行的请求不同，是post方式
xmlhttp.open("POST","/statics/demosource/demo_post.php",true);
xmlhttp.send();
}
</script>

ajax的好处在于你需要加载的时候才加载内容，通过自己设计个按钮或者条件，只有点击后触发ajax请求，响应内容才会加载出来,且无需重新刷新浏览器，就像今日头条的瀑布式浏览一样，这样的效果js也可以通过添加对象做到，但是ajax不会像js那样耗费大量性能，js添加删除事件，一旦事件多起来，就要耗费大量性能来支撑，但是ajax可以节省时间，而且在不在重新刷新页面的情况下加载内容，节省了很多事情呢

标签：xmlhttp,请求,前端,Ajax,send,网络,ajax,new,浏览器
来源： https://blog.csdn.net/qq_41136216/article/details/105511466

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

前端网络——Ajax使用

AJAX是什么？

Ajax的步骤>