AJax全接触

川长思鸟来 2022-09-28 11:45 112阅读 0赞

# 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);
    }
    });
    });
    
    });

![图片无法预览,请点击][58b7bb7f0001726212800720.jpg]

## 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)