ajax以及跨域

发表于 | 阅读次数:

XMLHttpRequest对象:

实例化:

1
var request = new XMLHttpRequest();

请求:

  • open(method,url,async)请求方法,地址,同步还是异步true是异步,false是同步
  • send(string)请求发送到服务器,get请求可以不写string参数，post可以写一个参数
  • setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);
  • send(“name=王二狗&sex=男”)

获取响应:

  • responseText:获得字符串形式的响应数据
  • responseXML:获得xml形式的响应数据
  • status和statusText以数字和文本形式返回http状态码
  • getAllResponseHeader()获取所有的响应报头

  • getResponseHeader()查询响应中的某个字段的值

  • readyState属性:
    0:请求未初始化,open还没有被调用
    1:服务器链接已建立,open已经调用了
    2:请求已接受,也就是接受到头信息了
    3:请求处理中,也就是接受到响应主题了
    4:请求已经完成,且响应已经就绪,也就是响应完成了

监听响应过程:

1
2
3
4
5
6
7
8
9
10
11
12
13
var request = new XMLHttpRequest();
request.open("GET","url",true);
request.send();
request.onreadystatechange = function(){
    if(request.readyState==4){
        if(request.status==200){
        //做一些事情,request.responseText
        }
        else{
        alert(request.status);
        }
    }
}

js解析json:

1
2
3
var jsondata = '{"sites":[{"name":"Runoob", "url":"www.runoob.com"},{"name":"Google", "url":"www.google.com"},{"name":"Taobao", "url":"www.taobao.com"}]}';
var jsonobj = JSON.parse(jsondata);
alert(jsonobj.sites[0].name)

会弹出sites列表的第一项的name值:Runoob

在线验证json正确性的网站:http://jsonlint.cn/

jQuery实现ajax:

一个jquery在线资源库:http://www.bootcdn.cn/all/

jQuery.ajax([settings])

type：类型，”POST”或”GET”，默认为”GET”
url ：发送请求的地址
data：是一个对象，连同请求发送到服务器的数据
dataType：预期服务器返回的数据类型。如果不指定，jQuery将自动根据HTTP包MINE信息来智能判断，一般我们采用json格式，可以设置为“json”或者”text”,如果设置为json格式,自动解析成jsonobj

success：是一个方法，请求成功后的毁掉函数。传入返回后的数据，以及包含成功代码的字符串

error：是一个方法，请求失败时调用此函数。传入XMLHttpRequest对象

1
2
3
4
5
6
7
8
9
10
11
12
$.ajax({
    type:"GET",
    url:"Main",
    dataType:"json",
    success:function(data){
        alert(data.success);
    },
    error:function(jqXHR){
        alert("错误码"+jqXHR.status);
    }
})
`

返回值是{“success”:true},如果访问成功,则弹出true

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$.ajax({
    type:"POST",
    url:"Main",
    dataType:"json",
    data:{
        name:"as"
    },
    success:function(data){
        alert(data.name);
    },
    error:function(jqXHR){
        alert("错误码"+jqXHR.status);
    }
})
`

服务器会返回{“name”:”得到的name”},如果访问成功,则弹出as

跨域:

一个域名组成:协议+子域名+主域名+端口号+请求资源地址

当协议,子域名,主域名,端口号中任何一个不同的时候,就算跨域

js出于安全考虑,不允许跨域调用对象

可以使用xhr2(ie10以下不支持)解决跨域问题:

只需服务端添加两个header为”Access-Control-Allow-Origin:*“和”Access-Control-Allow-Methods:GET,POST”

java服务器可以写:

1
2
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "GET,POST");