前端网络——Ajax使用

AJAX是什么？

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

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

---

开始了,下面这一堆就是规定的代码： ```javascript ``` 可能你还是有点恍惚，我们一行一行来解释： ###### 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可以节省时间，而且在不在重新刷新页面的情况下加载内容，节省了很多事情呢