AJAX基础

ajax的四个步骤

1.创建XMLHttpRequest这个对象，并做兼容性处理
var xhr=null;
if(window.XMLHttpRequest){
	xhr=new XMLHttpRequest();
}else{//IE6以下的版本
	xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
2.准备发送，有三个参数，第一个是发送方式,有get和post方法;第二个是发送地址,根据发送方式的不同，地址的构造略有不同，get方式要把发送的参数写到;第三个true代表异步，false代表同步
3.执行发送
xhr.open("get","./sever/zhangsan/login.php?C,true);
xhr.send(null);
or
xhr.open("post","./sever/zhangsan/login.php,true);
var param="";
param="uname="+uname+"&"+"pwd="+pwd;
xhr.setRequestHeader("Content-type","application/x-www-form-urlencode");
xhr.send(param);
4.
xhr.onreadystatechange()=function(){
	if(xhr.readyState==4){
		if(xhr.status==200){
			var result=xhr.responseText;//普通字符串或者JSON类型的数据
			//如果是xml的数据格式就用xhr.responseXML
            //然后对result进行字符串拼接等处理
		}		
	}
	
}

XML数据格式

用标签包裹：
	<booklist>
		<book>
			<name>三国演义</name>
			<author>罗贯中</author>
			<desc>一个杀伐纷争的年代</desc>
		</book>
		<book>
			<name>西游记</name>
			<author>吴承恩</author>
			<desc>神话传奇</desc>
		</book>
	</booklist>

XML数据处理

window.onload=function(){
	var xhr=null;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{
		xhr=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xhr.open("get","./sever/zhangsan/login.php?uname="+name,true)
	xhr.send(null);
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				var result=xhr.responseXML;
				var books=result.getElementsByTagName("booklist")[0].getElementsByTagName("book");
				var newHtml="";
				for(var i=0;i<books.length;i++){
					var itemBook = books[i];
					var name = itemBook.getElementsByTagName(‘name‘)[0].textContent;
					var author = itemBook.getElementsByTagName(‘author‘)[0].textContent;
					var desc = itemBook.getElementsByTagName(‘desc‘)[0].textContent;
					var tempHtml = "<tr><td>"+name+"</td><td>"+author+"</td>><td>"+desc+"</td></tr>";
					newHtml +=tempHtml;
				}
				doucment.getElementsById("bookCountainer").innerHTML=newHtml;
			}
		}
	}
}

JSON数据格式

同时有多个JSON对象
[
	{
		"title":"Java实战经典开发",
		"edition":3,
		"author":["smith","尼古拉斯","斯巴达"]
	},
	{
		"title":"Oracle实战经典开发",
		"edition":3,
		"author":["smith","尼古拉斯","斯巴达"]
	},
	{
		"title":"Vue实战经典开发",
		"edition":5,
		"author":["smith","尼古拉斯","斯巴达"]
	}
]
单个JSON对象
{
	"name":"sam",
	"age":"18",
	"sex":"man",
	"school":{
		"sname":"南京大学"，
		"address":"南京市鼓楼区汉口路22号"
	}
}

JSON数据处理

经JSON.parse()转化后

window.onload=function(){
	var xhr="";
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}else{
		xhr=new ActiveXObject("Microsoft.XMLHTTP")
	}
	xhr.open("get","./server/zhangsan/login.php?uname="+uname,true)
	xhr.send(null);
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				var result=xhr.responseText;
				result=JSON.parse(result);
				var newHtml=document.getElementsById("container").innerHTML;
				for(var i=0;i<result.length;i++){
					var item = result[i];
					var name = item.name;
					var sex = item.sex;
					var age = item.age;
					var tempHtml = "<tr><td>"+name+"</td><td>"+age+"</td><td>"+sex+"</td></tr>";
					newHtml += tempHtml;
				}
				document.getElementsById("countainer").innerHTML = newHtml;
			}
		}
	}
}

AJAX的封装

可以吸取的经验：
	在对方法进行封装时，要不断细化传递参数的各种问题，不断提高容错率，尽可能简化到傻瓜用户都可以使用的逻辑，并且要在便于维护修改的基础上，使封装后的代码功能齐全，所传递的参数最好是一个对象（各个参数的集合）

跨域

同源：
	协议相同：http和https不同
	域名相同：www.zhangsan.com
	端口相同：80
	只有同源，Ajax才能获取服务器数据
使用<script></script>标签的src属性来进行跨域访问

接口文档和模板引擎

接口文档：其中包含后端程序与前端程序交互的方式，和交互数据格式，以及服务器地址等关键信息

模板引擎：可以相对便捷地进行代码的重复操作

AJAX基础

原文：https://www.cnblogs.com/xmlt/p/14475951.html