Ajax

一、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";

}

}

});

});

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容