ajax

ajax五步曲:
var ajaxObj=new XMLHttpRequest();
ajaxObj.open=(method,url);如果是get方法,需要在url后面拼接数据,数据以?开头
ajaxObj.send=();如果是post方法需要在括号里拼接数据,用&连接数据
ajaxObj.onreadystatechange=function(){
if(ajaxObj.readyState==4&&ajaxObj.status==200){
console.log(ajaxObj.responseText);如果是xml的数据就通过ajaxObj.responseXML接收
}
}

封装成函数就是
function ajax_tool_pre(object){
var ajax=new XMLHttpRequest();
if(object.method=='get'){
ajax.open(object.method,object.url+'?'+object.data);
ajax.send();
}else{
ajax.open(object.method,object.url);
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ajax.send(object.data);
}

ajax.onreadystatechange=function(){
if(this.readyState==4&&this.status==200){
if(this.responseXML==null){
object.callBack(this.responseText);
}else{
object.callBack(this.responseXML);
}
}
}
}
参数传对象的好处是传入的四个参数可以不用排序data,url,method,callback

XML格式的页面输入规范是
开头需要声明<?xml version="1.0" encoding="UTF-8"?>
后面就可以随意写双标签,可以嵌套,但是没有但标签
php怎么取到XML文件呢?
<?php
header('content-type:text/xml;charset=utf-8'); 注意此处html换成了xml
$xmlStr = file_get_contents('info/people.xml'); 定义变量接收文件
echo $xmlStr; 输出
?>
html页面的ajax中ajax.responseXML就是XML页面的document,要获取xml页面的标签元素时可以这样写:ajax.responseXML.querySelector('name').innerHTML);方法和js差不多
1.然后我们可以动态创建元素,设置页面css
var table = document.createElement('table');
var tr = document.createElement('tr');
var td1 = document.createElement('td');
tr.appendChild(td1);
table.appendChild(tr);
document.body.appendChild(table);
td1.innerHTML =ajax.responseXML.querySelector('name').innerHTML; 理论上innerText和innerHTML都可以,但是有的版本浏览器innerHTML可以有效果,有的innerText有效果
2.可以拼接字符串,循环创建标签js方法
//创建一个空的字符串
var totalStr = "";
for (var i = 0; i < stars.length; i++) {
// 将循环的 star 保存起来
var eachStar = stars[i];
// 需要包装成
totalStr+='<tr>';
totalStr+="<td><img src='"+eachStar.children[0].innerHTML+"'></td>";
totalStr+="<td>"+eachStar.children[1].innerHTML+"</td>";
totalStr+="<td>"+eachStar.children[2].innerHTML+"</td>";
totalStr+="<td><a href='#'>点击了解更多</a></td>";
totalStr+='</tr>';
}
console.log(totalStr);
// 添加到 table
document.querySelector('#starBox').innerHTML = totalStr;
3.拼接字符串,JQ方法
var totalStr = '';
$('star',ajaxDocument).each(function(index,ele){ 一般都只传一个参数,第二个参数学名叫查询上下文,如果有第二个参数,选择器会从第二个参数里面寻找第一个参数
totalStr+="<tr>";
totalStr+="<td><img src='"+$(ele).children('imgpath').text()+"'></td>";
totalStr+="<td>"+$(ele).children('name').text()+"</td>";
totalStr+="<td>"+$(ele).children('skill').text()+"</td>";
totalStr+="</tr>";
})
$("#showBox").append(totalStr);

JSON对象,格式是.json,其实就是一个字符串,后缀名可以改成text等,为方便工作中的区分,所以写成json,能让人一眼就看到这里面写的是json对象,json对象是一个字符串,属性的名字必须用双引号括起来...属性的值 除了数字 都必须使用 双引号括起来...js中 如果要手写 JSON格式字符串 最外层 用单引号,内部使用 双引号
var jsonStr ='{"name":"狐狸兄弟","skill":"catchChicken"}';
可以通过一个JSON对象的方法 转化为 js对象
var obj = JSON.parse(jsonStr);