总结:Ajax(一)
get请求与post请求
get请求是从服务器中获取数据,post发送数据到服务器。
GET请求缺点:
1. 数据不安全:数据暴露在url地址栏中。
2.数据内容不能太长,GET请求限制数据大小
GET优点:
便于分享网址。
post请求的优点:
1.安全--不会暴露在url地址中
2.数据大小理论上不限制
post请求的缺点:
地址不可以分享。
get与post的应用:
post请求一般用于表单提交,get请求查找数据库中的某一条目(?xuehao=1004)。
HTTP 超文本传输协议
特点:
- HTTP传输,不是一个文件整体传输,把一个大文件分成一个个报行传输,浏览器渲染页面是一块一块加载,图片一条一条实现。
- HTTP无连接的(多次HTTP请求,每次请求完就关闭连接)。
FTP 文件上传协议 File Tranfer Protocal(本地资源上传到服务器上)
特点:
- 可靠、持续连接的。
为什么用Ajax?
- 浏览器产生请求,可能是输入了新网址或点了一次超链接等,使页面跳转,会导致页面全局刷新。
- Ajax技术可以让网页静悄悄发起HTTP请求,请求回来的数据可以在页面局部刷新。
Ajax的特点:
- 局部刷新、局部请求的特性,使速度更快
- 用户体验好,在不改变本页面的情况下,只刷新一个页面的局部渲染。
Ajax三要素:
- 带着数据偷偷上传到服务器(get/post)
- 服务器传回json
- 组建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
表单序列化
什么叫表单序列化
- 把表单中每一个控件的name属性变为username=xxx&psw=123456&…这种形式。
- 表单中每一个控件,都有一个name属性,把这些控件的name属性及值变成以上的数据形式。
- 单元素类型,可以通过表单id.elements.type来判断
- 写一个表单序列化函数
<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>