jQuery、AJAX基础学习笔记

XMLHttpRequest发送请求
request.open(“GET”,”get.php”, true);
request.send();

request.open(“POST”, “post.php”, true);
request.send();

request.open(“POST”, “create.php”, true);
request.setRequestHeader(“Content-type”, “application/s-www-form-urlencoded”);
requset.send(“name=…&sex=…”);

---

XMLHttpRequest取得响应
responseText:获得字符串形式的响应数据
responseXML:获得XML形式的响应数据
status和statusText：以数字和文本形式返回HTTP状态码
getAllRequestHeader():获取所有的响应报头
getResponseHeader():查询响应中的某个字段的值

readyState属性
0：请求未初始化，open已经调用了
1：服务器连接已建立，open已经调用了
2：请求已接受（接受到了头信息）
3：请求处理中（接受到响应主体）这里写代码片
4：请求已完成，响应已就绪（响应完成）

var request = new SMLHttpRequest();
requset.open(“GET”, “get.php”, true);
requset.send();
requset.onreadystatechange = function(){
if (request.readyState ==== 4 && requset.status === 200)
//doSomething – requset.reponseText
}

——监听request的readyState属性的值（变化？某些浏览器会从0~4进行遍历，这里只用看4的情况）
同时监听status

---

用jQuery实现Ajax
jQuery.ajax([settings]) —内置的ajax方法

• type：类型，“PSOT”“GET”
• url： 发送请求的地址
• data：是一个对象，连同请求发送到服务器的数据
• dataType：语气服务器返回的数据类型、如果不指定
  jQuery将自动根据HTTP请求来只能判断，一般采用json格式，可以设置为“json”
• success： 是一个方法，请求成功后的会掉函数，传入返回后的数据，以及包含成功代码的字符串
• error： 是一个方法，请求失败是调用次函数。传入XMLHttpRequset对象

$(document).ready(function(){
    $("#search").click(function(){
        $.ajax({
            type:"GET",
        url:"service.php?number= " + $("#keyword").val(),
        dataType:"json".
        data:{
            name:$("#staffName").val(),
        number:$("#staffNumber").val(),
        sex:$("#staffSex").val(),
        job:$("#staffJob").val()
            }
        success:function(data){
            if (data.success){
            $("#searchResult").html(data.msg);
        }else{
            $("#searchResult").html("出现错误" + data.msg);
        }
        },
        error:function(jqXHR){  //接收的参数
            alert("发生错误：" + jqXHR.status);
            }
        })
    });
});

————jQuery中Ajax的一般使用

---

http:// www . abc.com : 8080 / service.js
协议 子域名 主域名 端口号 请求资源地址

当协议，子域名，主域名，端口号中热议一个不相同时，都算作不同域
不同域之间相互请求资源，就算做“跨域”

javascript处于安全性方面的考虑，不允许跨域调用其他页面的对象（需在后台执行）。
（跨域：一个域名下的页面，请求另一个域名下的资源。协议，子域名，主域名，端口号中任意一个不同，就算跨域）

处理跨域的方法：
1.通过在同域名的web服务器创建一个代理。后台请求其他域名下的服务，把响应返回的结果调回前端
2.jsonp（解决主流浏览器的跨域数据访问的问题）
3.XHR2

---

jsonp
不支持post请求方式,只支持get请求

<script>
    function jsonp(json){
        alert(json["name"]);
    }
</script>
<script src = "http://www.......jsonp.js">-----在这个页面中：

jsonp({‘name’:’…’, ‘age’:’24’});

---

HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能
IE10以下版本不支持（其他的方式，貌似是对象不同）
在服务器端做一些小的改造即可：
header(‘Access-Control-Allow-Origin:‘); //这里的表示所有的域名，也可以设置为单个的域名
header(‘Access-Control-Allow-Methods:PSOT,GET’);