Bruce个人博客

Ajax请求服务器的过程

1.创建ajax对象

var xhr = new XMLHttpRequest();

XMLHttpRequest 是浏览器内置对象,用于在后台与服务器通信(交换数据),由此我们便可以实现对网页的

2.创建新的http请求(并设置请求地址)

xhr.open('get','./02.php');

xhr.open(请求方式get/post,url请求地址)
post方式发送请求时 需要设置请求头
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
get请求可以不设置

//调用open()方法并不会真正发送请求,而只是启动一个请求已被发送
//发送请求给服务端

xhr.send(null) (get请求方式时)
或 xhr.send('name = jim') (post请求方式时)

post方式发送请求时 需要设置信息
get方法发送请求时 信息拼接到url地址中
xhr.open('get','http://网址/index.php?name=tom&age=23&addr=sh<br/>')
给ajax设置事件

xhr.onreadystatechange = function(){
    if(xhr.readyState == 4 && xhr.status == 200){
        console.log('xhr' + xhr.responseText);
         //xhr.responseText是从请求地址中请求到的数据 
    }
}

onreadystatechange 是js中的事件的一种 存储函数或函数名,其意义在于监听,每当 readyState 属性改变时，就会调用该函数。

xhr.readyState 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。
- 请求未初始化 
- 服务器连接已建立 
- 请求已接收 
- 请求处理中 
- 请求已完成，且响应已就绪
由于服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

获取状态行
- xhr.status 状态码
- 200: "OK"
- 404: 未找到页面
- xhr.statusText 状态码信息

获取响应头
- xhr.getResponseHeader('Content-Type');
- xhr.getAllResponseHeaders();

响应主体
- xhr.responseText
- xhr.responseXML
我们需要检测并判断响应头的MIME类型后确定使用reauest.responseText或者request.responseXML

jQquery中的Ajax

jQquery为我们提供了更强大的Ajax封装

$.ajax({
        type: 'post'/'get',
        url: '发送请求的地址',
        data: '是一个对象,连同请求发送到服务器的数据',
        //dataType是预期服务器返回的数据.如果不指定,jq将自动根据HTTP包MIME信息来智能判断,一般我们使用json格式
        dataType:'json',
        beforeSend: function () {
            //发送请求前就调用的函数
        },
        success: function (data) {
            //请求成功时的回调函数
            //传入返回后的数据,以及包含成功代码的字符串
            //data是从后台获得的数据
        },
        complete: function () {
            //请求完成时的调用函数
        },
        error: function (err,errmsg) {
            //请求出现错误时的调用函数
            //传入XMLHttpRequest对象
        }
    });

处理跨域的方法

一.代理

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

二. JSONP

JSON Padding

JSONP可用于解决主流浏览器的get请求中跨域数据访问的问题

原理：其本质是利用了标签具有可跨域的特性， 由服务端返回一个预先定义好的Javascript函数的调用，并且将服务器数据以该函数参数的形式传递过来，此方法需要前后端配合完成。

<!--当我们用script标签去加载的时候  会把内容解析成js去执行-->

<script>
    function fuc(data){
        console.log(data.name);
    }
</script>
<script src="http://www.guangzhou.com/api.php?callback=fuc"></script>


<!--JSONP下的ajax请求-->

$.ajax({
        type: 'post'/'get',
        url: '发送请求的地址',
        data: '是一个对象,连同请求发送到服务器的数据',
        //dataType是预期服务器返回的数据.如果不指定,jq将自动根据HTTP包MIME信息来智能判断,一般我们使用json格式

        <!--数据格式为jsonp-->

        dataType:'jsonp',
        
        <!--需要一个jsonp属性 后台需要做出相应的修改-->
        jsonp:'callback',
        
        beforeSend: function () {
            //发送请求前就调用的函数
        },
        success: function (data) {
            //请求成功时的回调函数
            //传入返回后的数据,以及包含成功代码的字符串
            //data是从后台获得的数据
        },
        complete: function () {
            //请求完成时的调用函数
        },
        error: function (err,errmsg) {
            //请求出现错误时的调用函数
            //传入XMLHttpRequest对象
        }
    });

fetch 不考虑兼容可以使用

   fetch('./a.json',{method:'get'}).then(function(response){
       response.json().then(function(data){
           console.log(data);
       })
   });

HTTP协议

1. HTTP是一种无状态协议

HTTP请求的过程

一个完整的HTTP请求过程，通常有下面7个步骤

建立TCP连接 web浏览器向web服务器发送请求命令 web浏览器发送请求头信息 web服务器应答 web服务器发送应答头信息 web服务器向浏览器发送数据 web服务器关闭TCP连接 2. HTTP请求的构成

一个HTTP请求一般由四个本分组成

HTTP请求的方法或动作，比如是get还是post请求 正在请求的URL，即请求的地址 请求头，包含一些客户环境信息，身份验证信息等 请求体，也就是请求正文，请求正文中可以包含客户提交的查询字符串信息，表单信息等等 3. HTTP响应的组成

一个HTTP响应一般由三个部分组成

状态码：由数字和文字组成，用来显示请求成功还是失败 响应头：包含很多信息，例如服务器类型，日期时间，内容类型和长度等 响应体：也就是响应正文

同源&跨域

1. 同源策略

同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口完全相同。 2. 同源

一个域名的组成 ： 协议 子域名 主域名 端口号 请求资源地址 当协议，子域名，主域名。端口号都相同时才算同源 有任意一个不相同时，都算作不同域。

3. 跨域

不同域之间相互请求资源，就算作“跨域”。浏览器出于安全方面的考虑，不允许跨域调用其他页面的对象。