发送Ajax请求

发送ajax需要五步：

1、创建异步对象

2、设置请求的url等参数

3、发送请求

4、注册事件

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

get方式：

// 绑定点击事件document.querySelector('#btnAjax').onclick = function () {// 发送ajax 请求 需要 五步// 1.创建异步对象var ajaxObj = new XMLHttpRequest();// 2.设置请求的url等参数// 参数1 请求的方法 参数2 请求的urlajaxObj.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) {// 知道返回的是 xmlconsole.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;}}}