一、http请求的7个步骤
1.建立tcp连接
2.web浏览器向web服务器发送请求命令
3.浏览器发送请求头
4.服务器应答
5.服务器发送应答头信息
6.服务发送数据
7.服务器断开tcp
二、get与post区别
get形式请求数据,参数会以明文的形式拼接在url地址的后面,请求的长度受到url地址格式的限制。
post形式请求数据,参数会打包到请求对象中进行传递,不会显示在url地址中。数据请求的安全性比较get而言更加神秘。
get方式请求数据的效率相比post方式较高!
参数长度有一定的限制的情况下请求常规数据,使用get方式。
参数长度没有限制或者包含二进制数据或者包含安全要求的数据等,请求的数据涉及到安全性的情况下,使用post方式。
三、ajax(异步JAvaScript和XML)
如何实现ajax?
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
1.创建一个XMLHttpRequest对象
创建语法
var xhr = new XMLHttpRequest();
打开链接
xhr.open(“GET/POST”,“url?Params1=some¶ms2=some2”,true);
发送send
get:send()
post:
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
xhr.send(“name=”+uname.value);
监听
xhr.onreadystatechange=function(){
if(xhr.status == 200 && xhr.readyState == 4){
Console.log(xhr.responseText);
}
}
2.readyState值含义
0--------未初始化,尚未调用open。
1--------初始化,尚未调用send。
2--------发送数据,已经调用send。
3--------数据传送中。
4--------完成。
3.status值
200---------OK,服务器成功返回了页面。
400---------Bad Request 语法错误导致服务器不识别。
401---------Unauthorized 请求需要用户认证。
404---------Not Found 指定的url在服务器上找不到
500---------Internal Server Error 服务器遇到意外错误,无法完成请求。
503---------ServiceUnavailable 由于服务器过载或维护导致无法完成请求。
4.$.get()和$.post()
$.get语法:
$.get(url,[data],[callback],[type])
url:必需,待载入页面的url地址。
data:可选,待发送key/value参数。
callback:可选,载入成功时回调函数。
type:可选,返回内容格式,xml,html,script,jason,text,_default。
区别:
get请求是通过URL提交的,post请求则是http消息实体提交的。
get提交大小有限制(2KB),而post方式不受限制。
get方式会被缓存下来,可能有安全性问题,而post没有这个问题。
get方式通过$_get[]获取,post方式通过$_post[]获取。
$.post语法:
$.post(URL,data,callback)
url:必需,希望请求的url。
data:可选,规定连同请求发送的数据。
callback:可选,请求成功后所执行的函数名。
5.$.getScript()和$.getJson()
$.getScript()用于加载特定的JS文件;$.getJson()用于
专门加载Json文件。 (如果我们希望能在特定的情况再加载js文件,而不是一开始把所有jS文件都加载,这时使用$.getScript())。
$.getScript(url,callback)
url:为服务器的请求地址。
callback:数据请求成功后,执行的回调函数。
$.getJson(url,[data],callback)
url:请求加载json格式文件的服务器地址。
data:请求时发送的数据。
callback:数据请求成功后,执行的回调函数。
6.$.ajax()
语法:$.ajax({name:value,name:value,.....})
只有一个参数,传递一个各个功能键值对的对象。
url:string类型,发送请求的地址。
data:Object或string类型,发送到服务器的数据,键值对字符串或对象。
dataType:string类型,返回的数据类型,比如html、xml,json等。
beforeSend:function类型,发送请求前可修改XMLHttpRequest对象的函数。
complete:function类型,请求完成后调用的回调函数。
success:function类型,请求成功后调用的回调函数。
error:function类型,请求成功后调用的回调函数。
常用代码块:
获取评论:
$.ajax({
type:"get",url:"https://club.jd.com/discussion/getProductPageImageCommentList.action?productId=2608433",
async:true,
dataType:"jsonp",
success:function(res){
....................
})
}
});
登录注册:
$("#shouye").click(function(){$.get("http://datainfo.duapp.com/shopdata/userinfo.php?status=login&userID="+$("#nam").val()+"&password"+$("#pwd").val(),function(res,status,xhr){
if(status=="success"){
if(res==0){
alert("用户名不存在");
}else if(res==2){
alert("用户名或密码错误");
}else{
window.location.href = "index.html";
}
}
});
});
});