js原生ajax

一、什么是ajax？
    原生ajax的出现弥补了原始方式每次都要浪费时间和带宽去重新读取整个页面的缺陷。AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
    ajax，即异步请求。
同步请求和异步请求的区别：
同步请求：等待请求完成后再去执行后续代码
异步请求：请求和后续代码同时执行
ajax 请求后台数据 依靠接口（返回数据的），默认的方式是异步请求
二、XMLHttpRequest 对象
    XMLHttpRequest对象是ajax的基础，XMLHttpRequest用于在后台与服务器交换数据，且该对象的兼容性很好,目前所有的浏览器都支持XMLHttpRequest对象。
三、五步使用法：
1.创建对象 xmlhttprequest 请求数据的对象
var http=new XMLHttpRequest();
2.使用open方法设置和服务器的交互信息(服务器的链接)；
http.open();
第一个参数：请求的类型（get 和post）
get（www.maodou.com/www/my.php?name=zhangsan）;
post()----(post的数据在send中发送，安全性比get高);
第二个参数：请求的路径
第三个参数（可选）：同步还是异步 ，默认异步 true(异步) false（同步）
第四和第五个参数：可选，用户名、密码 、用户的身份验证
3.设置发送的数据，开始和服务器端交互
http.send();
参数一般为数据， 根据请求类型可选
4.创建请求读取完成事件

 http.onreadystatechange=function(){
//根据读取的状态去判断
// http.readyState ==4  表示请求读取完成
// http.status==200  读取的状态是成功（若为500，表示读取的状态是失败）
 //http.response   （http.responseText）返回json结果
        if(http.readyState==4&&http.status==200){
            console.log(http.response);
     // 5.渲染界面(更新)
        }
    }

四、几种跨域方法和解决：
js跨域是指通过js在不同的域之间进行数据传输或通信
什么情况下会产生跨域？
当请求的url 、协议、端口、域名、主机不同时，则会产生跨域，
请求本地数据的数据不会产生跨域。
如何解决ajax跨域：
一般ajax跨域解决就是通过JSONP解决或者CORS解决
JSONP解决跨域：
如果要进行跨域请求， 通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据，然后包装成script脚本回传，就可以突破同源策略的限制，解决了跨域访问的问题。
CORS解决跨域
主要通过后台的配置来解决，这里介绍通过后台配置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
修改为
Options FollowSymLinks
AllowOverride none
Order deny,allow
Allow from all