发送Ajax请求

发送ajax需要五步：

1、创建异步对象

2、设置请求的url等参数

3、发送请求

4、注册事件

5、在注册的事件中，获取返回的内容并修改页面的显示

get方式：

// 绑定点击事件
	document.querySelector('#btnAjax').onclick = function () {
		// 发送ajax 请求 需要 五步

		// 1.创建异步对象
		var ajaxObj = new XMLHttpRequest();

		// 2.设置请求的url等参数
		// 参数1 请求的方法 参数2 请求的url
		ajaxObj.open('get','02.ajax.php');
		// xxx.php?pass=123
		// 这只是一个字符串拼接  动态的传递参数
		// '03.get_senddata.php?userName='+document.querySelector('input').value;
		ajaxObj.open('get','03.get_senddata.php?userName=jack');

		// 3.发送请求
		ajaxObj.send();

		// 假设 有一个 接返回数据的 方法ajaxObj.get();
 		

		// 4.注册事件
		// onreadystatechange  状态改变就会调用
		// 如果要在 数据完美请求回来的时候 才调用 我们需要手动的 写一些判断的逻辑
		ajaxObj.onreadystatechange = function () {
			// 为了保证 数据 完整回来,我们一般会判断 两个值
			if (ajaxObj.readyState==4&&ajaxObj.status==200) {
				// 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
				// 5.在注册的事件中 获取 返回的 内容 并修改页面的显示
				console.log('数据完美的回来了');

				// 数据是保存在 异步对象的 属性中
				console.log(ajaxObj.responseText);

				// 修改页面的显示
				document.querySelector('h1').innerHTML = ajaxObj.responseText;
			}
			
		}

代码精简：

document.querySelector('#btnAjax').onclick = function () {
		var ajaxObj = new XMLHttpRequest();
		ajaxObj.open('get','02.ajax.php');
		ajaxObj.open('get','03.get_senddata.php?userName=jack');
		ajaxObj.send();
		ajaxObj.onreadystatechange = function () {
			if (ajaxObj.readyState==4&&ajaxObj.status==200) {
				console.log('数据完美的回来了');

				console.log(ajaxObj.responseText);

				document.querySelector('h1').innerHTML = ajaxObj.responseText;
			}
			
		}

post方式：

document.querySelector('#btnAjax').onclick = function () {
		var ajaxObj = new XMLHttpRequest();
		ajaxObj.open('post','02.ajax.php');
		ajaxObj.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		ajaxObj.send('name=jack&age=18');
		ajaxObj.onreadystatechange = function () {
			if (ajaxObj.readyState==4&&ajaxObj.status==200) {
				console.log(ajaxObj.responseText);
			}
			
		}

获取XML：

// 异步 对象中 有另外一个属性 用来专门获取 xml
// xml对象 在浏览器段 就是一个 document对象 
// 解析时 可以直接使用 querySelector 或者 getElementById等等 document对象 有的语法
console.log(ajax.responseXML);
console.log(ajax.responseXML.querySelector('kuzi').innerHTML);

获取XML对象：

document.querySelector('#getStars').onclick = function () {
		var ajax = new XMLHttpRequest();
		ajax.open('post','getStars.php');
		ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
		ajax.send();
		ajax.onreadystatechange = function () {
			if (ajax.readyState==4 && ajax.status==200) {
				// 知道返回的是 xml
				console.log(ajax.responseXML);

				// document对象
				var persons = ajax.responseXML.querySelectorAll('person');
				console.log(persons);	

				// 在循环之前 把table的 拼出来
				var str ='';

				// <table>
				str+='<table>';

				// 循环 获取其中的某一个
				for (var i = 0; i < persons.length; i++) {
					// 获取 当前循环的那个person标签对象
					 var currentPerson =  persons[i];

					 // 直接 拼接出 一个 table的 字符串 然后 设置到页面上即可

					 // 拼接开头
					 str+='<tr>';

					 str+='<td>'+currentPerson.querySelector('name').innerHTML+'</td>';
					 // 这里需要添加的是图片
					 str+='<td><img src="'+currentPerson.querySelector('path').innerHTML+'"></td>';
					 str+='<td>'+currentPerson.querySelector('skill').innerHTML+'</td>';

					 // 再次添加一个td
					  str+='<td><a href="#">点击了解更多_'+currentPerson.querySelector('name').innerHTML+'</a></td>';

					 // 拼接结尾
					 str+='</tr>';
				
				}

				// 循环完毕以后 将table 合并
				// </table>
				str+='</table>';

				// 测试 拼接的 内容 是否正确
				console.log(str);

				// 直接 添加到页面上
				document.body.innerHTML = str;
			}
		}
	}