ajax基础

一、什么是ajax

ajax是Asynchronous Javascript and XML的缩写(意思是异步的javascript和XML)

它是一种局部刷新技术，即在不重新加载整个页面的情况下，更新部分网页。它的作用是：请求后端接口，返回数据到前端，前端根据需求渲染数据到界面。

二、 原生js如何实现ajax

实现ajax离不开"XMLHttpRequest"对象，ajax就是通过它来发送异步请求的，下面来具体介绍ajax的实现。

五步法：

1.创建ajax对象；2.建立服务器连接；3.发送请求；4.监听服务器响应状态；5.渲染界面

var http = new XMLHttpRequest();

http.open("get", "", "");

open()方法用于初始化XMLHttpRequest实例对象，它一共可以接受5个参数。

参数1.发送请求的类型，get或者post

args2.api路径

args3.true/false, 请求方式是同步还是异步

          同步：等待请求完成之后再执行后续代码    false

          异步：请求和后续代码同时执行    true

args4,5.连接接口的账号密码

http.send();

send()方法用于发送http请求，它的参数是可选的

get请求，不带参数

post请求，带参数

http.onreadystatechange=function (){}

XMLHttpRequest对象的常用属性

一.readyState 表示XMLHttpRequest实例对象的状态，它可能返回以下值：

    0：请求未初始化

    1：open()方法已经调用，但send()方法还没调用

    2：send()方法已经调用，尚未开始接收数据

    3：正在接收数据

    4：响应数据接收完成

二.onreadystatechange 属性指向一个监听函数

    通信过程中，每当实例对象发生状态变化，它的readyState属性的值就会改变。这个值每一次变化，都会触发readystatechange事件。

    readystatechange事件发生时（实例的readyState属性变化），就会执行这个属性。

    另外，如果使用实例的abort()方法，终止 XMLHttpRequest请求，也会造成readyState属性变化，导致调用onreadystatechange属性。

三.responseText 服务器响应的文本内容

四.responseXML 服务器响应的XML内容对应的DOM对象

五.status 服务器返回的htttp状态码

    200服务器响应成功

    404表示页面丢失，未找到

    500表示服务器内部错误

三、原生ajax书写兼容

    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new Active XObject("Microsoft.XMLHTTP");
    }

  

四、原生ajax封装

function Ajax(method, url, data, callback) {
        var http;
        if (window.XMLHttpRequest) {
            http = new XMLHttpRequest();
        }
        else {
            http = new ActiveXObject("Microsoft.XMLHTTP");
        }

        if (method = "get") {
            if (data) {
                url += "?";
                url += data;
            }
            http.open(method, url);
            http.send();
        }
        else {
            http.open(method, url);
            if (data) {
                http.send(data);
            }
            else {
                http.send();
            }
        }
        http.onreadystatechange = function () {
            if (http.readyState == 4 && http.status == 200) {
                callback(http.response);
            }
        }
    }
    var res=null;
    Ajax("get", "http://www.baidu.com", null, function (result) {
        var data=eval(result);
        res=data;
    });

 原生ajax在请求接口的时候会产生跨域问题

什么情况下会产生跨域问题？

1. 协议不一致
2. 主机名称不一致
3. 端口号不一致

如何实现跨域？（受浏览器同源策略的影响，不是同源的脚本不能操作其它源下面的对象，想要操作另一个源下的对象就是去实现跨域）

    1.cors跨域资源共享

        在后台服务器配置请求头header("Access-Control-Allow-Origin", "*"), *指所有域名都可以访问

        或者将*改为特定的网址，此时此网址就可以通过ajax访问其下的内容了

    2.JSONP跨域

        原理是动态创建<script>标签，然后利用其src属性不受同源策略约束来跨域获取数据

        采用JSONP跨域的问题

            1.是个网站都可以拿到数据，安全性存在问题

            2.只能是get请求，不能是post请求

            3.可能被注入恶意代码，篡改页面内容