JS19---js原生ajax

前后端分离项目 请求API（程序应用级 接口）

API：请求后端服务器的一个接口

调用的结果 - - -后台数据返回

主要用open和send
XMLHttpRequest对象是ajax的基础：用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

src上写的程序的接口 写法
跨域原理（为什么会有跨域）解决跨域的方法 cros jsonp
异步请求 局部刷新技术
AJAX是一种创建快速动态网页的技术。通过在后台与服务器进行少量数据交换。
AJAX可以使网页实现异步更新。可以在不重新加载整个网页的情况下，对网页的某部分进行更新
eg：微信朋友圈点赞评论功能 瞬间出现你的点赞和评论 局部刷新功能
对象 XMLHttpRequest （相当于js的对象）
状态码 200 成功 404丢失 500服务器
open 建立服务器之间的连接（相当于打开了用户与服务器的一个通道）
参数一 ：请求的方式 get post
参数二：API路径
参数三：async
true（异步：请求和后续代码同时进行） false（同步：等待请求完成后再执行） 默认异步请求
参数四五：用户名和密码
一般最后还会写一个callback回调函数，返回后台数据
send（）向服务器发送请求 （向通道里边发送东西）
setRequestHeader
五部写ajax

常规五步法

    1.建立对象
    var ajax=new XMLHttpRequest();
    2.建立服务器连接
    ajax.open("get","");      第三个参数不写默认为异步
    3.发送请求
    ajax.send();
    4.建立ajax事件   (服务器响应)判断状态       onreadystatechange读取状态的事件
       readyState  读取状态      status  响应状态
    ajax.onreadystatechange=function(){
	    console.log(ajax.readyState);   //2 3 4  2读取建立  3读取过程当中  4代表请求读取完成 
        console.log(ajax.status);       //200  响应的状态码
        if(ajax.readyState==4&&ajax.status==200){
     5.渲染页面   数据加载到页面上    responseText  response   
       后台返回的值一般都是json   字符串json  或对象型json
            ajax.responseText
        }
    }

封装写法

    function method(med,api,async,data,callback){
        var http=new XMLHttpRequest();
        if(med=="get"){
            if(data){
                api+="?";
                api+=data; //有数值得话拼接出一段网址路径，没有的话就不用了
            }
            http.open(med,api,async);
            http.send();  //我理解的get方法，api是一个网址路径
        }
        else{
            if(data){
                http.send(data);   //post方法要传data，在后台，不用传data
            }
            else{
                http.send();
            }
            http.open(med,api,async)
        }
        http.onreadystatechange=function(){
            if(http.readyState==4&&http.status==200){
                callback(http.response); 
                //利用回调函数callback，让数据出去
            }
        }
    }
//api 请求后端服务器的一个接口
method("get","www.baidu.com/api",true,"",function(result){   //result就是http.response
    console.log(result);
    console.log(JSON.parse(result));  //将后台返回的数据转换为json形式
})

console.log(JSON.parse(result)); 将后台返回的数据转换为json形式

---

老师写的

五步使用法:
1.创建XMLHTTPRequest对象
2.使用open方法设置和服务器的交互信息
3.设置发送的数据，开始和服务器端交互
4.注册事件
5.更新界面

get请求:

get请求:
//步骤一:创建异步对象
var ajax = new XMLHttpRequest();
//步骤二:设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
ajax.open('get','getStar.php?starName='+name);
//步骤三:发送请求
ajax.send();
//步骤四:注册事件 onreadystatechange 状态改变就会调用
ajax.onreadystatechange = function () {
   if (ajax.readyState==4 &&ajax.status==200) {
    //步骤五 如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
console.log(ajax.responseText);//输入相应的内容
  }
}

post请求:

//创建异步对象  
var xhr = new XMLHttpRequest();
//设置请求的类型及url
 xhr.open('post', '02.post.php' );
//发送请求
xhr.send('name=fox&age=18');
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  } 
};

封装写法

function ajax_method(url,data,method,success) {
    // 异步对象
    var ajax = new XMLHttpRequest();

    // get 跟post  需要分别写不同的代码
    if (method=='get') {
        // get请求
        if (data) {
            // 如果有值
            url+='?';
            url+=data;
        }else{

        }
        // 设置 方法 以及 url
        ajax.open(method,url);
        // send即可
        ajax.send();
    }
    else{
        // post请求
        // post请求 url 是不需要改变
        ajax.open(method,url); 
        // 判断data send发送数据
        if (data) {
            // 如果有值 从send发送
            ajax.send(data);
        }else{
            // 木有值 直接发送即可
            ajax.send();
        }
    }

    // 注册事件
    ajax.onreadystatechange = function () {
        // 在事件中 获取数据 并修改界面显示
        if (ajax.readyState==4&&ajax.status==200) {
            // console.log(ajax.responseText);

            // 将 数据 让 外面可以使用
            // return ajax.responseText;

            // 当 onreadystatechange 调用时 说明 数据回来了
            // ajax.responseText;

            // 如果说 外面可以传入一个 function 作为参数 success
            success(ajax.responseText);
        }
    }
}

远程服务器

买一个远程空间 在空间中安装我的服务器和数据库 124.0.1.12
在买一个远程域名 www.baidu.com.将这个远程域名与远程空间中的域名绑定
当我访问远程域名的时候会自动解析我远程空间中的域名，去访问我后台的数据库
baidu 主机名称 www.baidu.com域名
服务端加文件名访问特定文件

区分同步异步

默认为异步true 请求和后续代码同步进行
同步（先请求，再执行后续代码）会报错，主线程锁死（原生js不使用同步）

	var result;
    function method(med,api,async,data){
        var http=new XMLHttpRequest();
        if(med=="get"){
            if(data){
                api+="?";
                api+=data;
            }
            http.open(med,api,async);
            http.send();
        }
        else{
            http.open(med,api,async);
            if(data){
                http.send(data);
            }
            else{
                http.send();
            }
        }
        http.onreadystatechange=function(){
            if(http.readyState==4&&http.status==200){
                console.log(1);
                result=http.response;  //事件出去，不可以return
                //利用回调函数callback，让数据出去
            }
        }
    }
//api 请求后端服务器的一个接口
    method("get","",true);  //result就是http.response
    console.log(result);
 //先输出undefined再输出1   异步请求和后续代码同时进行
 //若为false 输出主线程锁死 和undefined。未输出1，原生js不能用同步

js跨域（重点）

面试会问

js跨域是指js在不同域之间进行数据传输（也叫跨域资源共享）

产生跨域：协议不同 端口不同 主机名不同

文件名不同不会产生跨域

解决跨域

若报错 Access - Control - Allow - Origin 出现跨域访问

Jsonp

跨域原理是通过src+callback回调函数来请求 ----不是ajax

不属于原生ajaxl
例子：写的百度搜索里边就用到了jsonp跨域，下边是用到jsonp的代码片段
创建了一个script标签，里边加一个src属性，getData里边的参数就是我们需要的数据
callback可以简写为cb
getData（函数体）是传给后端的回调函数：先声明函数再传给后端，后端接受这个函数，将请求的数据通过回调函数的参数返回出来

    function Jsonp(){
        sc=document.createElement("script");
        sc.src=arguments[0]+this.value+"&cb=getData";  
        document.body.appendChild(sc);
    }
        function getData(res){
			console.log(res)
    }

在js中，我们直接用XMLHttpRequest请求不同域上的数据时，是不可以的。但是，在页面上引入不同域上的js脚本文件却是可以的，jsonp正是利用这个特性来实现的。
比如，有个a.html页面，它里面的代码需要利用ajax获取一个不同域上的json数据，假设这个json数据地址是http://example.com/data.php,那么a.html中的代码就可以这样：


第二张图，后台原理：第一句，接受callback回调
第二句，后端返回的数据
第三句，将数据转化为json，给callback传参，传参后输出
jsonp的原理就很清楚了，通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。

cros跨域（跨域资源共享）

在后端配置cros跨域请求

CORS是一个W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
第一种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 404
出现这种情况的原因如下：
本次ajax请求是“非简单请求”,所以请求前会发送一次预检请求(OPTIONS)
服务器端后台接口没有允许OPTIONS请求,导致无法找到对应接口地址
解决方案: 后端允许options请求
第二种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且The response had HTTP status code 405
这种现象和第一种有区别,这种情况下，后台方法允许OPTIONS请求,但是一些配置文件中(如安全配置),阻止了OPTIONS请求,才会导致这个现象
解决方案: 后端关闭对应的安全配置
第三种现象:No ‘Access-Control-Allow-Origin’ header is present on the requested resource,并且status 200
比如origin头部检查不匹配,比如少了一些头部的支持(如常见的X-Requested-With头部),然后服务端就会将response返回给前端,前端检测到这个后就触发XHR.onerror,导致前端控制台报错
解决方案: 后端增加对应的头部支持
第四种现象:heade contains multiple values ‘,’
表现现象是，后台响应的http头部信息有两个Access-Control-Allow-Origin:*
解决方案:
建议删除代码中手动添加的*，只用项目配置中的即可
建议删除IIS下的配置*，只用项目配置中的即可
解决ajax跨域
一般ajax跨域解决就是通过JSONP解决或者CORS解决,如以下:
CORS解决跨域问题
CORS的原理上文中已经介绍了，这里主要介绍的是，实际项目中，后端应该如何配置以解决问题(因为大量项目实践都是由后端进行解决的)，这里整理了一些常见的后端解决方案:
PHP后台配置
PHP后台得配置几乎是所有后台中最为简单的,遵循如下步骤即可:
第一步:配置Php 后台允许跨域

<?php header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept');
//主要为跨域CORS配置的两大基本信息,Origin和headers
第二步:配置Apache web服务器跨域(httpd.conf中)
原始代码：
<Directory />
    AllowOverride none
    Require all denied
</Directory>
修改代码：
<Directory />
    Options FollowSymLinks
    AllowOverride none
    Order deny,allow
    Allow from all
</Directory>
JAVA后台配置
JAVA后台配置只需要遵循如下步骤即可:
第一步:获取依赖jar包下载 cors-filter-1.7.jar, java-property-utils-1.9.jar 这两个库文件放到lib目录下。(放到对应项目的webcontent/WEB-INF/lib/下)
第二步:如果项目用了Maven构建的,请添加如下依赖到pom.xml中:
<dependency>
    <groupId>com.thetransactioncompany</groupId>
    <artifactId>cors-filter</artifactId>
    <version>[ version ]</version>
</dependency>
NET后台配置
.NET后台配置可以参考如下步骤:
第一步:网站配置
打开控制面板，选择管理工具,选择iis;右键单击自己的网站，选择浏览;打开网站所在目录,用记事本打开web.config文件添加下述配置信息,重启网站
"Access-Control-Allow-Headers":"X-Requested-With,Content-Type,Accept,Origin"