ajax数据请求，以及项目运行(一)

ajax( Asynchromous JavaScript and XML)概念

ajax原理： 通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。

作用：处理数据交互

同步和异步

同步： 阻塞模式。会阻塞后面的代码运行，也就是说，如果这块代码没有运行完，下面的代码就无法运行
异步： 非阻塞模式。不会阻塞后面代码的运行，在这块代码没有运行完之前，后面的代码也会执行，不会受到影响

实现一个简单的ajax请求

1) 创建一个ajax对象：XMLHttpRequest

（在IE6及以下，没有这个对象，用的是ActiveXObject：ActiveXObject（‘ Microsoft.XMLHTTP’）

let xhr = null;
try {
	xhr = new XMLHttpRequest();
}catch(e){
	xhr = new ActiveXObject('microsoft.XMLHTTP')
}

2) 调用这个XMLHttpRequest 的 open方法，里面穿传入获取方法、数据连接、是否异步等参数

xhr.open('GET',url,true)
//或者
xhr.open('POST',url,true)

3) 调用这个XMLHttpRequest 的 send 方法

xhr.send();
//如果是post方式，需要提交数据的话，则在send中提交
xhr.send(data);

4) 调用这个XMLHttpRequest 的onreadystatechange 事件

xhr.onreadystatechange = function(){}

5) onreadystatechange 触发一个函数，在函数总判断XMLHttpRequest 的readyState，如果是4 则是成功

if(xhr.readyState == 4){           //readyState : ajax 的工作状态
   //我们ajax请求返回的内容就会存放在 responseText 属性下，是一个字符串
   alert('xhr.responseText')  
}

ajax请求的代码

	let xhr = null;
	try {
		xhr = new XMLHttpRequest();
	}catch(e){
		xhr = new ActiveXObject('microsoft.XMLHTTP')
	}
	//  这里的try{}catch(){}用以处理IE6下的兼容，如果是用if判断，则直接判断 window.XMLHttpRequest也是可以的
	xhr.open('get',url,true)
	xhr.send();
	xhr.onreadystatechange = function(){  //onreadystatechange :当ajax状态值发生改变的时候，触发的事件
		if(xhr.readyState == 4){   //readyState : ajax 的工作状态
			alert('xhr.responseText')    //我们ajax请求返回的内容就会存放在 responseText 属性下，是一个字符串
		}
	}

项目运行

如果使用到ajax请求数据，那在运行项目的时候，我们就需要启服务来运行项目

1) 搭建服务器环境

wamp集成环境搭建：
下载安装之后，在相应的文件夹中找到一个 www 的文件夹，这里就是项目的存放点了
点击wamp开启软件

2) 如何在服务器下运行我们的项目

将项目放在 wampp文件夹中的www文件夹中
将 wampp 运行起来（点击软件运行即可）
在浏览器地址栏输入地址，一般可以以localhost或者是192.168 ip地址等等来打开

① 在这里 localhost 相当于当前根目录，指的是 www 文件夹的位置
② IP地址可以再电脑的网络连接属性中的查看到
③ 假如 www 文件夹下有一个 text.html需要运行，则是在地址栏输入：localhost /text.html

在开启服务的时候，建议不要开启迅雷、迅雷看看等相关的软件，可以会占用我们服务器的端口