AJAX以及HTTP

ajax:Asynchronous JavaScript and XML (异步的JavaScript和XML)

环境:需要在搭建的服务器下运行

http是计算机通过网络进行通信的规则 浏览器想服务器请求信息和服务 http是一种无状态的协议

一个完整的HTTP请求有7个步奏

1.建立tcp连接

2.web浏览器向web服务器发送请求命令

3.web浏览器发送请求头信息

4.web服务器应答

5.web服务器发送应答头信息

6.web服务器向浏览器发发送数据

7.web服务器关闭tcp连接

一个http请求一般由四部分组成

1.Http请求的方法或动作,比如是GET还是POST请求

2.正在请求的URL,总得知道请求的地址是什么

3.请求头,包含一些客户端环境信息,身份验证信息等

4.请求体,也就是请求正文

get:一般用于信息获取 使用URL传递参数 对所发送的信息的数量也有限制,一般在2000个字符左右

post:一般用于修改服务器上的资源 对所发送信息的数量无限制

一个HTTP响应一般由3部分组成

1.一个数字和文字组成的状态码,用来显示请求是成功还是失败

2.响应头。响应头也和请求头一样包含许多有用的信息。列如服务器类型 日期时间 内容类型和长度等

3.响应体,也就是响应正文。

http状态码有3位数子构成,其中首位数字定义了状态码的类型:

1xx:信息类,表示收到web浏览器的请求

2xx:成功,表示用户请求被正确接收,理解和处理;列如200 ok

3xx:重定向,表示请求没有成功,客户必须采取进一步动作

4xx:客户端错误,表示客户端提交的请求有错误;;列如404 not found

5xx:服务器错误,表示服务器不能完成请求的处理;列如500

创建XMLHttpRequest对象

if(window.XMLHttprequest){

request=new XMLHttpRequest();

}else{

request=new ActiveXObject("Microsoft.XMLHTTP");//ie5 ie6

}

发送请求

open(method,url,async)//open("get","get.php")

send(string)//post方式 string必填

当是post请求时

reques.open("POST","create.php",true);

request.setRequestHeader("Content-type","application/x-www-form-urlencoded");

request.send("name=小谢&age=28");

当是post 方式的请求时需要设置响应头的信息。get方式的请求不需要

获得相应

responseText:获得字符串形式的响应数据

respinse.XML:获得XML形式的相应数据

status和statusText:以数字和文本的形式返回http状态码

getAllRespinseHeader():获得所有的响应报头

getRespinseHeader():查询相应中的某个字段的值

监听readystate属性

:请求未初始化,open还没被调用

1:服务器连接已建立,open已经建立

2:请求已接收,也就是接收到了头信息

3:请求处理中,也就是接收到响应主体了

4:请求完成,且响应已就绪,也就是响应完成了

基本上一个AJAX程序是这样的步奏

var request=new XMLHttpRequest();//创建requeat对象

request.open("GET","get.php",true);//get方式的请求以及请求的地址和类型

request.send();//发送请求

request.onreadyStatechange=function(){ //监听事件

if(request.readyState===4&&request.status===200){ //当响应完成并且用户请求被陈宫接收

request.responseText;//返回的相应内容文本的形式

}

}

对于JSON数据的解析eval() JSON.parse()

var jsondate='{"infour":[{"name":"小谢","age":27},{"name":"小德","age":26},{"name":"小勇","age":25}]}';

var jsonobj=eval('('+jsondate+')');//eval()函数解析

jsonobj.infour[0].name;

var jsonobj1=JSON.parse()

jsonobj1.infour[0].name;

对于evlal()方法需要注意,如果有恶意代码,先执行代码 再解析代码 不推荐用eval()

jsonlint.com 在线的json校验工具

跨域

1代理的方式,需要在后台服务器设置

2.JSONP的方式,和Jquery结合使用,只支持get方式的跨域

3.html5 支持XHR2:XMLHttprequest Level2'' 已经实现跨域访问。只需在服务器端做小小的改动即可,在后台文件头部声明即可

header('Access-Control-Allow-Origin:*');

hesder('Access-Cortrol-Allow-Metnods:POST,GET');

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180128G0HR4F00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券