Ajax

Ajax初理解

ajax主要功能就是在不跳转页面的情况下，去服务器要数据并返回数据来渲染页面。
要做到不跳转要回数据且遵守http协议，只能模拟请求报文发送给服务器，让服务器发送响应报文。
浏览器
主要步骤：

//创建异步对象
var xhr = new XMLHttpRequest();
//创建请求行
xhr.open('get','data.php');
//请求方法可以是get或post   data.php 是链接数据库的文件
//创建请求头
xhr.setRequestHeader();；
//回调函数
xhr.onreadystatechange = function(){
	if(xhr.readyState==4 && xhr.status==200){
		console.log(xhr.responseText);
	}
};
//创建请求主体（可省略）   发送
xhr.send(null);

重点
请求方法的不同，步骤略有不同。
get方法
请求头可以省略不写
send(null)
发送的数据在data.php?key=keyvalue&key2=key2value 进行拼写
post方法
请求头必须写 xhr.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);
发送的数据在
send(‘key=keyvalue&key2=key2value’) 中。
服务器（data.php 或者是 接口）
如果自己练习data.php

	//规定编码格式
	header("content-type:text/html; charset=utf-8");
	//超全局变量$_GET $_POST 接受发过来的数据
	$data = $_GET['key'];     //或者是$_POST[]
	// 连接数据库
	$re = file_get_contents('data.json');
	//返回数据
	echo $re;
	

如果是接口
接口已经规定好了请求方法，key。看文档直接用。
下面是xml 和 json文件的解析
xml
xhr.responseText 换成 xhr.responseXML
这时候xhr.responseXML可以看作为dom,可以使用dom方法来获取标签
例如

<weather>
	<city>
		<name>北京</name>
		<sky>阴天</sky>
	</city>
	<city>
		<name>郑州</name>
		<sky>晴天</sky>
	</city>
</weather>

var city = xkr.responseXML.querySelectorAll('city');
				for(var i = 0 ;i<=city.length;i++){
					if(document.querySelector('input[type=text]').value == city[i].querySelector('name').innerHTML){
						document.querySelector('div').innerHTML = city[i].querySelector('sky').innerHTML;
					}
				}

json
JSON.parse(xhr.responseText) 进行解析

var obj = JSON.parse(xhr.responseText);
				var arr = obj.carriers;
				var html = "<table>";
				for(var i =0;i<arr.length;i++){
					var arr1 = arr[i].groups;
					// console.log(arr1);
					for(var j =0;j<arr1.length;j++){
						var arr2 = arr1[j].servers;
						for(var k = 0;k<arr2.length;k++){
							html+='<tr>';
							html+='<td>'+arr2[k].servername+'</td>'
							html+='</tr>';
						}
					}
				}
				html+= "</table>";
				console.log(html)
				document.querySelector('div').innerHTML = html;

{
    "gttype":[
        {
            "gtid":"100003",
            "gtidname":"账号"
        }
    ],
    "carriers":[
        {
            "groups":[
                {
                    "groupid":"A2775P003",
                    "groupname":"安卓QQ1-10区",
                    "servers":[
                        {
                            "serverid":"A2775P003001",
                            "servername":"手Q1区王者独尊",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003002",
                            "servername":"手Q2区绝代智谋",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003003",
                            "servername":"手Q3区不羁之风",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003004",
                            "servername":"手Q4区千金重弩",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003005",
                            "servername":"手Q5区死亡绽放",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003006",
                            "servername":"手Q6区最终兵器",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003007",
                            "servername":"手Q7区叛徒吟游",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003008",
                            "servername":"手Q8区暴走机关",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003009",
                            "servername":"手Q9区欲望之月",
                            "glids":""
                        },
                        {
                            "serverid":"A2775P003010",
                            "servername":"手Q10区风华绚烂",
                            "glids":""
                        }
                    ]
                }
 			]               
        }
    ]
}

json的载体是字符串
解析后的是 对象 或者是 数组