跨域(JS同源策略的限定)

客户端发起请求》服务端的处理和响应》客户端重新载入页面(循环),跨域(JS同源策略的限制)

AJAX:Asynchronous JavaScript And Xml(异步的JS和XML)

AJAX(Asynchronous Javascript And XML)

概念:不要加载整个网页就可更新部分网页的技艺

  • 利用HTML和CSS来完毕页面,表明音讯;
  • 运用XMLHttpRequest和web服务器实行数据的异步交换 ;
  • 选择JavaScript操作DOM,达成动态局地刷新。

联机:客户端发起呼吁》服务端的处理和响应》客户端重新载入页面(循环)

XMLHttpRequest
  • XMLHttpRequest对象创造
    var request;
    if(window.XMLHttpRequest){
    request = new XMLHttpRequest();//IE7+,Firefox,Chrome,Opera,Safari
    }else{
    request = new ActiveXObject("Microsoft.XMLHTTP");//兼容IE5,IE6
  • XMLHttpRequest发送请求
    open(method,url,async) (async默认为true,异步)
    send(string)(GET请求可不填写,POST请求一定要填写
    setRequestHeader主意要写在open和send之间,不然会抛出至极。)
    request.open("POST","create.php",true);//POST方法
    request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    request.send("name=李二狗&sex=女");
  • XMLHttpRequest取得响应
    • requestText:获得字符串方式的响应数据
      requestXML:获得XML情势的响应数据
      status和statusText:以数字和文件格局重回HTTP状态码
      getAllResponseHeader():获取具有的响应报头
      getResponseHeader():查询响应中的有个别字段的值
    • readyState属性
      0:请求未开首化,open还尚无调用。
      1:服务器连接已经创造,open已经调用了。
      2:请求已接受,也正是吸收接纳到头新闻了。
      3:请求处理中,也正是接到到响应中央了。
      4:请求已到位,且响应已就绪,也等于响应完结了。
    • onreadystatechange事件监听
      var request = new XMLHttpRequest();
      request.open("GET","get.php",true);
      request.send
      request.onreadystatechange = function(){
      if(request.readyState === 4){
      if(request.status === 200)}
      document.getElementById("searchResult").innerHTML = request.responseText
      }else {
      alter("发生错误" + request.status);} }
HTTP
  • 概念
    HTTP是电脑通过网络开始展览通讯的平整,是一种无状态协议。(不创造持久的连天,也正是服务端不保留连接的相干新闻)
  • 步骤
    1.建立TCP连接
    2.Web浏览器向Web服务器发送请求命令
    3.Web浏览器发送请求头音讯
    4.Web服务器应答
    5.Web服务器发送应答头音讯
    6.Web服务器想浏览器发送数据
    7.Web服务器关闭TCP连接
  • HTTP请求的组成都部队分
    1.HTTP呼吁的方法或动作(GETPOST请求)
    2.正值呼吁的UWranglerL
    3.请求头(客户端环境音讯,身份验证音讯等)
    4.请求体(客户提交的询问字符串新闻,表单消息等)
    GET:信息获取、使用URL传递参数**(发送信息的数量一般限制在2000个字符)
    POST:修改服务器上的资源(对发送信息数量无限制)
  • HTTP响应的组成都部队分
    1.数字和文字组成的状态码(用来突显请求成功或许败诉)
    2.响应头(服务器类型、日期时间、内容类型和长度等)
    3.响应体
  • 状态码
    1XX:音信类。表示接到Web浏览器请求,正在越来越的处理中。
    2XX:成功。表示用户请求被正确接受。(200 OK)
    3XX:重定向,表示请求没有中标,客户必须运用进一步的动作。
    4XX:客户端错误,表示客户端提交的伏乞有荒唐。(404 NOT
    Found,意味着请求中援引的文书档案不设有。)
    5XX:服务器错误,表示服务器不能够到位对请求的处理。

异步:客户端实时呼吁》服务端处理和响应》客户端获得响应后局地刷新页面

JSON
  • JSON:JavaScript对象表示法(JavaScript)
    1.JSON是储存和沟通文本消息的语法,类似XML。它利用键值对的办法来协会,已于人们阅读和编辑,同时也不难机器解析和转变。
    2.JSON是单身于言语的,什么语言都得以解析json。
  • JSON解析:eval和JSON.parse
    1.eval:不会去看JSON字符串是或不是合法,字符串中的一些js方法会直接执行,相比较不安全。
    var jsonobj = eval( '(' + jsondata + ')' );
    2.JSON.parse:可预告json字符串中的错误。
    var jsonobj = JSON.parse(jsondata);
  • JSON校验工具
    JSONLint

异步达成的显若是,XMLHttpRequest对象的面世

JQuery中的AJAX

jQuery.ajax([settings])

  • type:类型,“POST”或”GET”,默认为“GET”。
  • url:出殡请求的地址。
  • data:对象,连同请求发送到服务器的数量。
  • dataType:预料服务器再次来到的数据类型。假诺不点名,jQuery将自动根据HTTP包MIME新闻来智能判断,一般我们选拔json格式,能够安装为“json”
  • success:措施,请求成功后的回调函数。传入重临后的数额,以及包罗成功代码的字符串。
  • error:办法,请求退步时调用此函数。传入XMLHttpRequest对象。
    $(document).ready(function(){
    $("#search").click(function(){
    $.ajax({
    type:"GET",
    url:"service.php?number=" + $("#keyword").val(),
    dataType:"json",
    success:function(data){
    if(data.success){
    $("#searchResult").html(data.msg);
    }else {
    $("#searchResult").html("出现错误:" + data.msg); }
    } ,
    error:function(jqXHR){
    alter(“发生错误:” + jqXHR.status); }
    }); });
    (POST方法多加二个data属性 data:{ })
    ($(document).ready()
    与window.onload的区别
    )
    (http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js
    百度静态财富jquery库,可间接引入)

 

跨域(JS同源策略的限量)
  • 1.域名地点:协议 + 子域名 + 主域名 + 端口号 + 请求财富地址
    2.当协议、子域名、主域名、端口号重任意3个差别等时,都不失为分歧域。
    3.差别域之间相互请求能源,就当成“跨域”。
  • 拍卖跨域方法一:代理
  • 处理跨域方法二:JSONP
    JSONP可用于解决主流浏览器的跨域数据访问的标题。(不扶助POST请求)
    前端:
    data:"jsonp"
    jsonp:"callback"
  • 处理跨域方法三:XHR2
    1.HTML5提供的XMLHttpRequest
    Level2已经实现了跨域访问以及别的的一部分新效率。
    2.IE10之下的本子都不协助。
    3.在劳动器端做一些改建即可:
    header('Access-Control-Allow-Origin:*');(*意味着全数域都足以访问)
    header('Access-Control-Allow-Methods:POST,GET');

创建XHR对象

var request;
if(window.XMLHttpRequest){
     request = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari
}else{
     request = new ActiveXObject("Microsoft.XMLHTTP");//IE6,IE5 
}

HTTP请求:无状态协议(不树立持久链接,服务器不保留记录是没有回想),它的进程如下7步:

1、建立TCP连接

② 、浏览器向服务器发送请求命令

三 、浏览器发送请求头消息

④ 、服务器应答

五 、服务器发送应答头新闻

陆 、服务器想浏览器发送数据

七 、服务器关闭TCP连接

 

HTTP请求的组成:请求的点子(get或post等);请求的U奥迪Q3L;请求头(环境新闻,身份验证);请求体。

HTTP响应的三结合:状态码(200,304等);响应头(服务器时间,其余消息);响应体。

 

XHGL450对象的方法

open(method,url,async)//async同步照旧异步,暗许异步为true

send(string)

 

监听请求的响应是还是不是中标

var request = new XMLHttpRequest();
request.open("GET","get.php",true);
request.send();
request.onreadystatechange=function(){
    if(request.readyState===4 && request.status===200){
        request.responseText//取得响应体内容
    }      
}

用post提交表单时,须求在open和send中间添加二个设置

request.setRequesrHeader("Content-Type","application/x-www-form-rulencoded");

 

json解析三种艺术:

var jsonData='{"staff":[{"name":"洪七公","age":70},{"name":"郭靖","age":35}]}'
var jsonObj=eval('('+jsonData+')');//容易产生错误,不会校验json是否合法,会直接执行json中的js语句
var jsonObj=JSON.parse(jsonData);//推荐

 

Jquery中的$.ajax([settings])

type:类型,“POST”或“GET”,默认“GET”

url:发送请求的地方

data:是三个对象,连同请求发送到服务器的数码

dataType:预期服务器重回的数据类型,一般为json,若不点名jquery将依照http包mime新闻智能判断

success:方法,请求成功的回调函数,传入再次来到的数码及分包成功代码的字符串

error:方法,请求失利的回调函数,传入XMLHttpRequest对象

$.ajax({
   type:"GET",
   url:"sever.php?number"+$("#keyword").val(),
   dataType:"json",
   success:function(data){
        if(data.success){alert(data.msg)}
    },
    error:function(err){
        alert("错误状态码:"+err.status)
    }
})    

 

跨域

图片 1

当协议、子域名、主域名、端口号中肆意1个不一样等时,都不失为分歧域。

办法一:后端代理

方法二:JSONP(支持get,不支持post)

<!--在www.aaa.com页面中-->
<script>
function jsonp(json){
    alert(json["name"])
}
</script>
<script scr="http://www.bbb.com/jsonp.js"></script>
<!--在www.bbb.com页面中-->
jsonp({'name':"洪七公","age":70})

 方法三:HTML5提供的XH路虎极光2(ie10以下版本不帮衬)

服务端增添如下(PHP)

header("Access-Control-Allow-Origin:*")
header("Access-Control-Allow-Methods:POST,GET")