总结：Ajax(一)

总结：Ajax（一）

get请求与post请求

get请求是从服务器中获取数据，post发送数据到服务器。

GET请求缺点：

1. 数据不安全：数据暴露在url地址栏中。
2.数据内容不能太长，GET请求限制数据大小

GET优点：

便于分享网址。

post请求的优点：

1.安全--不会暴露在url地址中
2.数据大小理论上不限制

post请求的缺点：

地址不可以分享。

get与post的应用：

post请求一般用于表单提交，get请求查找数据库中的某一条目(?xuehao=1004)。

HTTP 超文本传输协议

特点：

1. HTTP传输，不是一个文件整体传输，把一个大文件分成一个个报行传输，浏览器渲染页面是一块一块加载，图片一条一条实现。
2. HTTP无连接的(多次HTTP请求，每次请求完就关闭连接)。

FTP 文件上传协议 File Tranfer Protocal(本地资源上传到服务器上)

特点：

1. 可靠、持续连接的。

为什么用Ajax？

1. 浏览器产生请求，可能是输入了新网址或点了一次超链接等，使页面跳转，会导致页面全局刷新。
2. Ajax技术可以让网页静悄悄发起HTTP请求，请求回来的数据可以在页面局部刷新。

Ajax的特点：

1. 局部刷新、局部请求的特性，使速度更快
2. 用户体验好，在不改变本页面的情况下，只刷新一个页面的局部渲染。

Ajax三要素：

1. 带着数据偷偷上传到服务器(get/post)
2. 服务器传回json
3. 组建DOM，更新页面

Ajax实现

get请求实现：

			//发ajax请求
			//S1:创建xhr对象
			var xhr;
			if(window.XMLHttpRequest){//如果IE7以上,返回false
				xhr=new XMLHttpRequest();
			}else{//否则 IE6<=
				xhr=new ActiveXObject("Microsoft.XMLHTTP");
			}
			//S2:给xhr绑定事件，这个事件在xhr对象就绪状态改变时触发
			xhr.onreadystatechange=function(){
				if(xhr.readyState==4){//4:接受文件完毕后要做的事情
					div1.innerHTML=encodeURIComponent(xhr.responseText);
				}
			}
			//S3:open("请求方法"，"请求数据的地址","是否异步，一般填true");
			xhr.open("get","data/1.txt",true);
			//S4:真正发送
			xhr.send(null);

post方法：

		//发ajax请求
		//S1:创建xhr对象
		var xhr;
		if(window.XMLHttpRequest){//如果IE7以上,返回false
			xhr=new XMLHttpRequest();
		}else{//否则 IE6<=
			xhr=new ActiveXObject("Microsoft.XMLHTTP");
		}
		//S2:给xhr绑定事件，这个事件在xhr对象就绪状态改变时触发
		xhr.onreadystatechange=function(){
			console.log(xhr.readyState);
			if(xhr.readyState==4){//4:接受文件完毕后要做的事情----请求已完成
				div1.innerHTML=xhr.responseText;
			}
		}
		//S3:open("请求方法"，"请求数据的地址","是否异步，一般填true");
		var str="我是中国人，我爱自己的祖国";
		console.log(xhr.readyState);//0 open()方法未调用之前，为0----请求未初始化
		//xhr.open("get","php/04do.php?text="+encodeURIComponent(str),true);
		xhr.open("post","php/05do2.php?",true);
		console.log(xhr.readyState);//1  open()方法调用之后，为1------建立服务器连接
		//假如用post请求，必须写一句，模拟成表单处理
		xhr.setRequestHeader("Content-type","application/X-www-form-urlencoded");
		//S4:真正发送
		xhr.send("age=18&&name=zhangsan");

解析：

Ajax：Asynchronous javascript and xml----异步的JavaScript和XML

XMLHttpRequest对象

	var xhr=new XMLHttpRequest();------IE6不兼容
	兼容处理---能力检测
		var xhr;
		if(window.XMLHttpRequest){//如果IE7以上,返回false
			xhr=new XMLHttpRequest();
		}else{//否则 IE6<=
			xhr=new ActicveXObject("Microsoft.XMLHTTP");
		}
		xhr.onreadystatechange=function(){
			if(xhr.readyState==4){//4:接受文件完毕后要做的事情
				div1.innerHTML=xhr.responseText;
			}
		}

open方法

	open("get/post方法","请求的路径","true");
	xhr.open("get","data/1.txt?K:V",true);
		第一个参数:表示请求方式  get/post
		第二个参数:处理请求的路径
		第三个参数:是否异步处理  true
	关于异步：setInterval、setTimeout、ajax、事件回调函数

注意：

	open()方法并没有真正发送请求。

send()方法：发送请求

	get方式：send(null);
	post方式:
		//假如用post请求，必须写一句，模拟成表单处理
		xhr.setRequestHeader("Content-type","application/X-www-form-urlencoded");
		xhr.send("age=20&name=zx");

encodeURIComponent()方法

	为了传输中文到服务器上会乱码，前端需要用这个方法进行处理。
	get/post请求假如要用中文，一般吧中文转变为URI标准字符。

onreadystatechange事件

	xhr.readyState属性一旦改变，该事件就触发，我们只需关心属性值为4的状态。
	console.log(xhr.readyState);//0 open()方法未调用之前，为0----请求未初始化
	xhr.open("post","php/05do2.php?",true);
	console.log(xhr.readyState);//1  open()方法调用之后，为1------建立服务器连接

状态码

	每次HTTP请求都有状态码status
	200 ok  成功
	304 not modified  文件未改变----之前已在缓存中
	404 not found

表单序列化

什么叫表单序列化

1. 把表单中每一个控件的name属性变为username=xxx&psw=123456&…这种形式。
2. 表单中每一个控件，都有一个name属性，把这些控件的name属性及值变成以上的数据形式。
3. 单元素类型，可以通过表单id.elements.type来判断
4. 写一个表单序列化函数

<form id="biaodan">
		<p>
			<label>请输入姓名:<input type="text" name="username"></label>
		</p>
		<p><label>请输入密码:<input type="password" name="psw"></label></p>
		<p>
			<label>请选择你的性别：
				<input type="radio" name="gender" value="男">男
				<input type="radio" name="gender" value="女">女
			</label>
		</p>
		<p>
			<label>请选择你的性别：
				<input type="checkbox" name="hobby" value="足球">足球
				<input type="checkbox" name="hobby" value="篮球">篮球
				<input type="checkbox" name="hobby" value="打豆豆">打豆豆
				<input type="checkbox" name="hobby" value="编程">编程
			</label>
		</p>
		<p>
			<label>请选择你所在身份
				<select name="prov" id="prov">
					<option value="江苏">江苏</option>
					<option value="广东">广东</option>
					<option value="湖南">湖南</option>
				</select>
			</label>
		</p>
		<p>
			<label>
				请谈谈你的建议<input type="textarea" name="message" cols="30" row="10">
			</label>
		</p>
		<p>
			<input type="button" name="" value="点击提交" id="btn"/>
		</p>
	</form>
	<script type="text/javascript">
		var biaodan=document.getElementById("biaodan");
		var btn=document.getElementById("btn");
		btn.onclick=function(){
			//得到所有表单的元素的数据
			//1.获取所有表单控件
			var eles=biaodan.elements;
			// console.log(eles.length);
			// console.log(eles[0].value);
			var res=[];//k=v&k=v&k=v
			//2.循环遍历所有的表单控件
			for(var i=0;i<eles.length;i++){
				var ele=eles[i];
				// console.log(ele.type);
				switch(ele.type){
					case "button":
					case "submit":
					case "reset":
						break;
					case "text":
					case "password":
					case "textarea":
						res.push(ele.name+"="+ele.value);
						break;
					case "radio":
					case "checkbox":
						ele.checked&&res.push(ele.name+"="+ele.value);
					case "select-one":
						var options=ele.getElementsByTagName("option");
						for(var j=0;j<options.length;j++){
							options[j].selected&&res.push(ele.name+"="+options[j].value);
						}
				}
			}
			console.log(res.join("&"));
		}

关于JSON的处理

后台一般给的是字符串，我们要把字符串转成json格式：（三种方法）

	<script src="myajax.js"></script>
	<script type="text/javascript">
		myajax.get("php/1.json",{},function(error,data){
			// console.log(typeof data);//服务器返回的数据一般是string
			if (error) { return;}
			
			//把返回的string类型的数据转成json格式：
			//eval():把字符串当成JS语句进行
			/*方法一：eval()技巧
			var json=eval("("+data+")");
			console.log(json);
			console.log(typeof json);
			*/
			
			/*
			方法二： new Function
			 */
			/*
			没人这么写，虽然也可以。
			var fn=new Function("for(var i=1;i<=100;i++){console.log(i);}");
			fn();*/
			/*
			var data=new Function("return"+data)();
			console.log(typeof data);
			*/
			
			/*
			方法三(常用)：JSON.parse();把字符串最终转化为json
					JSON.stringify(); json---->字符串
					缺点：IE6/7不兼容。如果需要兼容，就使用JSON-js的插件。
			 */
			var data=JSON.parse(data);
			console.log(data.res[1].name);
		});
	</script>