Ajax学习笔记

XMLHttpRequest对象的创建

xmlhttprequest是一个可以在不重新加载整个页面的情况下进行前后端数据交换的对象

XMLHttpRequest，IE5  IE6不支持；
兼容方法：
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)
    method：规定HTTP发送请求的方式是get还是post,不区分大小写，一般来说用大写
    url：请求地址(相对地址或绝对地址)
    async：同步/异步(false/true)，默认是异步也就是true，可以不用填写
  • send(string) //发送到服务器
    string：get方法时不填或填null；post方法时一般要填

例如：

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

request.setRequestHeader("Content-type","application/x-www-form-urlencoded ")//设置HTTP头信息，一定要写在open()和send()之间

request.send("name=xxxx&sex=xxx");

XMLHttpRequest取得响应

  • responseText:获得字符串形式的响应数据
  • responseXML：获得XML形式的响应数据（比较少）
  • status和statusText:以数字和文本形式返回HTTP状态码
  • getAllResponseHeader()：获取所有的响应报头
  • getResponseHeader()：查询响应中的某个字段的值
  • readyState属性的变化代表服务器响应的变化
  • 0：请求未初始化，open还没有调用

1：服务器连接已建立，open已经调用了

2：请求已接收，也就是接收到头信息了

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

4：请求已完成，且响应已就绪，也就是响应完成了

var request = new XMLHttpRequest() //建立XHR对象
request.open("GET","get.php",true); //用get方法异步打开get.php
request.send(); //发送请求头信息
request.onreadystatechange=function(){
if(request.readState===4&&request.status===200){
//做一些事情 request.responseText;

通过onreadystatechange事件 ，对readyState属性进行监听即对服务器的响应进行监听，
readyState===4响应完成；
status===200，请求成功

  • 建立异步请求的过程4个步骤：

a:new一个XHR对象

b:调用open方法

c:send一些数据

d:对过程进行监听，来知道服务器是不是正确地做出了响应，接着可以做一些事情
（监听readyState,响应成功可以做一些事情，比如获取服务器响应的内容在页面上做一些呈现）

JSON解析

JQuery中的Ajax

1、在线引用（百度静态资源公共库）

2、jq实现Ajax（代码如下）

$(document).ready(function(){
$("#save").click(function(){
$.ajax({
type:"post",
url:"service.php",
dataType:"json",
data:{ 
name:$("#staffName").val(),
number:$("#staffNumber").val(),
sex:$("#staffSex").val(),
job:$("#staffJob").val()
},
success:function(data){
if(data.success){$("#createResult").html(data.msg)}
else{$("#createResult").html("error: " + data.msg) }
},
error:function(jqXHR){
alert("error: "jqXHR.status);
}
});
});

});

AJax全接触_ajax

javaScript跨域

什么事跨域呢?

跨域：不同域之间相互请求资源

事实上HTTP和HTTPS两个协议的url看上去都可以省略端口号，但是他们访问的默认端口不同

HTTP默认访问80端口

HTTPS默认访问443端口

所以http访问https肯定是跨域

JavaScript处于安全方面的考虑，不允许跨域调用其他页面的对象。

什么是跨域呢，简单的理解就是因为JavaScript同源策略的限制，
a.com域名下的js无法操作
b.com或者c.a.com域名下的对象。

处理跨域的方法

1、处理跨域方法一 代理

通过在同域名下的web服务器端创建一个代理：

北京服务器(域名:www.beijing.com)

上海服务器(域名：www.shanghai.com)

比如在北京的web服务器的后台(www.beijing.com/proxy-shanghaiservice.php)
来调用上海服务器(www.shanghai.com/services.php)的服务，然后再把访问结果返回给前端，这样前端调用北京同域名的服务就和调用上海的服务效果相同了。

2、处理跨域方式二——JSONP(只支持GET请求)：
JSONP可用于解决主流浏览器的跨域数据访问的问题。

在www.aaa.com页面中：

<script>
function jsonp(json){
     alert(json["name"]);
}
</script>
<script src="http;//www.bbb.com/jsonp.js"></script>

在www.bbb.com页面中：

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

3、处理跨域的方法三——XHR2：

1、HTML5提供的XMLHttpRequest Level2已经实现了跨域访问以及其他的一些新功能

2.IE10以下的版本都不支持

3.在服务器端

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

完毕………………………………………..