@EncyKe
2016-09-29T09:57:14.000000Z
字数 5589
阅读 5172
前端
JavaScript
Ajax (Asynchronous JavaScript and XML),即异步的JavaScript和XML。Ajax不是语言,而是一种技术,可以在不完整加载整个网页的前提下,加载网页的部分,即使用Ajax技术可以异步局部加载网页。
实现:有了XMLHttpRequest对象才有了异步处理,才有了ajax;才能:
1. 运用HTML和CSS实现页面,表达信息;
2. 运用XMLHttpRequest和web服务器进行数据的异步交换;
3. 运用JavaScript操作DOM,实现动态局部刷新;
定义: HTTP是计算机通过网络通讯的规则,使浏览器(客户)能够向服务器(web服务器)请求信息和服务。
特点: HTTP是一种无状态的协议:
1. 不建立持久的连接;
2. 没有记忆(不会保留信息);
HTTP客户端发起请求,创建端口;
HTTP服务器在端口监听客户端请求;
HTTP服务器向客户端返回状态和内容;
参考:HTTP基础:同步&异步
在输入链接或者刷新之后——
chrome://net-internals/#dns
可查看chrome自身的DNS缓存组成:
含GET、POST、PUT、DELETE、HEAD、TRACE、OPTIONS等多种;
GET:
1. 一般用于信息获取、查询而非修改;
2. 使用Url传递参数;
3. 发送的信息量有限制,2000个字符左右;
POST:
1. 一般用于修改服务器上资源;
2. 发送的信息量无限制;
组成:
1. 状态码;
2. 响应头,包含服务器类型、日期、内容类型、长度等;
3. 响应体,即响应正文;
HTTP状态码
1XX
:请求已接收,正在处理;
2XX
:请求接受成功,处理完成,成功返回:200即ok;
3XX
:请求重定向;即请求没有成功,客户须进一步操作;
4XX
:客户端错误:400有语法错误不能理解,401请求未授权,403拒绝提供服务,404未找到改地址;
5XX
:服务器错误:500服务器发生未知错误,503服务器端当前不能处理;
var request = new XMLHttpRequest();
var request;
if (window.XMLHttpRequest)
{
request = new XMLHttpRequest(); //IE 7+...
}
else
{
request = new ActiveXObject("Microsoft.XMLHTTP"); //IE 6, IE 5
}
open()
方法:
open(method,url,async)
method
:请求的方式,大小写不敏感;url
:请求地址,相对/绝对均可;async
:异步:true (默认值);同步:false;setRequestHeader()
方法:
setRequestHeader("Content-type": "application/x-www-form-urlencode")
send()
方法:
send(string)
string
:GET因信息置于url中,故string可以缺省;POST请求须有string;readyState
0
:请求未初始化,open未被调用;
1
:服务器连接已建立,open已调用;
2
:请求已接收,已接到头信息;
3
:请求处理中,已接到响应主体;
4
:请求已完成,响应已就绪;
status
:以数字形式返回HTTP状态码;statusText
:以文本形式返回HTTP状态码;getAllResponseHeader()
:获取所有的响应头;getResponseHeader()
:查询响应中的某个字段的值;responseText
:获取字符形式的相应数据responseXML
:获取XML形式的相应数据ajax()
加载服务器数据该法是最底层、功能最强大的请求服务器数据的方法,它不仅可以获取服务器返回的数据,还能向服务器发送请求并传递数值:
语法:jQuery.ajax([settings])或$.ajax([settings])
参数settings为发送ajax请求时的配置对象,在该对象中:
url
:发送请求的地址;
data
:对象,为请求时传递的数据;
dataType
:服务器返回的数据类型,一般可设置为json;
type
:发送数据请求的方式,默认为get;
success
:请求成功时执行的的回调函数;
error
:请求失败时调用的函数;
eval('('+jsondata+')')
:不考虑JSON是否合法,不识别恶意代码而直接执行,慎用;
JSON.parse(jsondata)
:相比eval()更加友好,会校检json数据,若不合理不予解析;
load()
异步请求数据通过Ajax请求加载服务器中的数据,并把返回的数据放置到指定的元素中:
语法:load(url,[data],[callback])
参数url为加载服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
getJSON()
异步加载JSON数据通过Ajax异步请求的方式,获取服务器中的数组,并对获取的数据进行解析,显示在页面中:
语法:jQuery.getJSON(url,[data],[callback])或$.getJSON(url,[data],[callback])
url参数为请求加载json格式文件的服务器地址,可选项data参数为请求时发送的数据,callback参数为数据请求成功后,执行的回调函数。
getScript()
异步加载并执行JS文件异步请求并执行服务器中的JavaScript文件:
语法:jQuery.getScript(url,[callback])或$.getScript(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
get()
以GET方式从服务器获取数据采用GET方式向服务器请求数据,并通过方法中回调函数的参数返回请求的数据:
语法:$.get(url,[callback])
参数url为服务器请求地址,可选项callback参数为请求成功后执行的回调函数。
post()
以POST方式从服务器发送数据向服务器发送数据,服务器接收到数据之后,进行处理,并将处理结果返回页面:
语法:$.post(url,[data],[callback])
参数url为服务器请求地址,可选项data为向服务器请求时发送的数据,可选项callback参数为请求成功后执行的回调函数。
serialize()
序列化表单元素值将表单中有name属性的元素值进行序列化,生成标准URL编码文本字符串,直接可用于ajax请求:
语法:$(selector).serialize()
其中selector参数是一个或多个表单中的元素或表单元素本身。
ajaxSetup()
设置全局Ajax默认选项设置Ajax请求的一些全局性选项值,设置完成后,后面的Ajax请求将不需要再添加这些选项值:
语法:jQuery.ajaxSetup([options])或$.ajaxSetup([options])
可选项options参数为一个对象,通过该对象设置Ajax请求时的全局选项值。
ajaxStart()
和ajaxStop()
绑定Ajax事件ajaxStart()
用于在Ajax请求发出前触发函数,ajaxStop()
用于在Ajax请求完成后触发函数:
语法:$(selector).ajaxStart(function())和$(selector).ajaxStop(function())
其中,两个方法中括号都是绑定的函数,当发送Ajax请求前执行ajaxStart()方法绑定的函数,请求成功后,执行ajaxStop ()方法绑定的函数。
对一个URL——
协议: http://
子域名: www.
主域名: xxx.com
端口号: 8080 (默认:80可省略)
请求资源地址: /xxx/xxx
以上一个不同即为跨域。
在后台调用他域的服务,然后传回前端,代理方法属于后台方法。
只针对GET,不支持POST;
在页面中设置:
<script>
function jsonp(json){
...
}
</script>
<script src="他域url/jsonp.js"></script>
datatype:json
改为datatype:jsonp
;jsonp:自定义参数名称
;$jsonp = $_GET["自定义参数名称"];
。需要支持XmlHttpRequest level2的浏览器;
在服务器端进行改造:
header("Access-Control-Allow-Origin:*");//权限所有都可以
header("Access-Control-Allow-Methods:POST,GET");
JSON (JavaScript Object Notation),即JS对象表示法,为轻量级数据交换格式;其数据类型包括:标量 (scalar,字符串或数字)、序列 (sequence,若干个并列数据,数组或列表)、映射 (mapping,又名散列hash、字典dictionary,键值对);
,
分隔;:
表示;{}
表示;[]
表示;参考文档:
HTTP协议详解
HTTP请求和相应详解