web前端数据交互ajax

什么是ajax？它的应用场景是什么？它的运行原理是什么？
ajax是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验。

Ajax 应用场景

1. 页面上拉加载更多数据
2. 列表数据无刷新分页
3. 表单项离开焦点数据验证
4. 搜索框提示文字下拉列表

Ajax的运行原理相当于浏览器发送请求与接收响应的代理人，以实现在不影响用户浏览页面的情况下，局部更新页面数据，从而提高用户体验。

使用原生js写出一个简单的ajax请求

    //第一步：创建ajax对象
    var xhr = new XMLHttpRequest();
    //第二步：告诉ajax对象要向哪发送请求，以什么方式发送
    xhr.open('get','http://127.0.0.1:3000/first');
    //第三步：发送请求
    xhr.send();
    //第四步：获取服务器端响应到客户端
    xhr.onload = function(){
        console.log(xhr.responseText);
    }

使用jquery写出一个简单的ajax请求

$.ajax({
        url:'/api',
        type:'post',
        data:{},
        dataType:'json',
        success:function(res){
            console.log(res);
        }
    })

服务端响应的数据格式

在真实的项目中，服务器端大多数情况下会以 JSON对象作为响应数据的格式。当客户端拿到响应数据时，要将 JSON 数据和 HTML 字符串进行拼接，然后将拼接的结果展示在页面中。

在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。

JSON.parse() // 将 json 字符串转换为json对象

常见的http状态码都有哪些？
100=>正在初始化（一般是看不到的）
101=>正在切换协议
200或者以2开头的两位数=>都是代表响应主体的内容已经成功返回了
202=>表示接受
301=>永久重定向/永久转移
302=>临时重定向/临时转移（一般用来做服务器负载均衡）
304=>本次获取的内容是读取缓存中的数据，会每次去服务器校验
400=>参数出现错误
401=>未认证，没有登陆网站
403=>禁止访问，没有权限
404=>客户端访问的地址不存在
500=>未知的服务器错误
503=>服务器超负荷

http请求方式有几种？
get 请求指定的页面信息，并返回实体主体。
head 类似get请求，只不过返回的响应中没有具体的内容，用于获取报头

请尽可能详尽的解释ajax的工作原理
第一步：创建一部对象var xhr = new XMLHttpRequest()；
第二步：设置请求行xhr.open('请求方式','请求地址')；
第三步：发送请求Get方式xhr.send(null),
如果是post请求还要设置请求头

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    xhr.send("name=zs&age=18");
    // 监听服务端的响应
    xhr.onreadystatechange=function(){
        if(xhr.status==200&&xhr.readyState==4){
            //获取json
            var json = xhr.responseText&&JSON.parse(xhr.responseText)
            //获取xml
            var xml = xhr.responseXML;
            console.log(json,xml)
        }
    }

页面编码和被请求的资源编码如果不一致如何处理？
a.html的编码是gbk或者gb2312的，而引入的js编码为utf-8的，那就需要在引入的时候

同理，如果你的页面是utf-8的，引入js是gbk的，那么就需要加上charset="gbk".

如何解决跨域问题？
jsonp，服务器代理，cors

jsonp的跨域原理是什么？
动态在页面中创建一个script标签，使其src属性指向后端数据接口，后端数据接口必须返回一个js函数的调用字符串(如cb('{"name":"zs","age":"18"}'))，将要返回给前端的json数据作为函数的实参，当script标签加载完毕后会在浏览器中执行后端返回的函数调用，所以可以在函数内部拿到服务端调用的时候传入的实参，所以就间接实现了跨域请求数据。

什么是同步和异步？哪种执行方式更好？
同步是指一个程序执行完了接着执行另外一个程序，异步是指多个程序同步进行，所以异步效率更高，因为异步不会出现阻塞现象，前一个程序的执行不会影响后一个程序的执行。

get和post的区别，何时使用post？
get是将要传递的参数拼在url中进行传递，传递数据量少，不安全；
post是将传递的参数放在请求体里传递，携带数据量大，相对安全，要提交一些敏感数据(比如登陆密码)，上传文件时，必须使用post请求。

请解释下javascript的同源策略？
同源策略是浏览器的一项安全策略，浏览器只允许js代码请求和当前所在服务器域名，端口，协议相同的数据接口上的数据，这就是同源策略。

一个页面从输入url到页面加载显示完成，这个过程中都发生了什么？
首先根据域名查询DNS服务器获取服务器IP，然后拿着服务器IP和域名请求对应的服务器，请求成功后web服务器会根据一系列运算，将客户端需要的数据通过网络传输到客户端浏览器，最终由浏览器解析后呈现给终端用户。

网站从http协议切换到https协议需要对代码做哪些处理？
不需要对代码做任何处理，只需要在web服务器中加入一个ssl的安全认证模块即可。

什么是RESTful API？
RESTful的核心思想是，客户端发出的数据操作指令都是“动词+宾语”的结构，比如GET/articles这个命令，GET是动词，/articles是宾语。
补充说明：
动词通常就是五种HTTP方法，对应CRUD操作：
GET：读取 Read
POST：新建 Create
PUT：更新 Update
PATCH：更新 Update，通常是部分更新
DELETE：删除 Delete