1.什么是ajax

ajax主要是用来实现客户端和服务端异步通信的效果，实现页面的局部刷新，ajax原生方式主要是通过XMLHttpRequest,ActiveObject(IE)对象来实现异步通信效果早期的浏览器不能原生支持ajax，后来浏览器都提供了对ajax的原生支持

2.ajax的优势在哪儿

1. 不需要插件的支持，可以直接被大多数主流的浏览器支持

2. 提高web程序性能

3. 传统模式提交数据是通过form表单，数据获取是通过页面刷新获取整页内容，ajax可以通过XMLHttpRequest对象向服务器请求希望提交的护具，按需请求。

4.提高用户体验

5.无需刷新页面即可更新数据

3.ajax在哪儿使用

用户登陆注册，检测用户数据重复
城市多级联动，可使用ajax
文本框实时搜索显示搜索记录

我们给大家演示一个文本框搜索的案例，使用jquery封装的ajax接口实现

    css
        <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .container {
            width: 500px;
            margin: 80px auto;
        }

        .container>.inp {
            width: 100%;
            height: 30px;
            border-radius: 3px;
            border: #dddddd 1px solid;
        }

        .container>ul {
            width: 100%;
            background-color: #F0F0F0;
            margin-top: 3px;
        }

        .container>ul>li {
            width: 100%;
            height: 50px;
            line-height: 50px;
            font-size: 14px;
            text-indent: 20px;
        }
        .container>ul>li:hover{
            color: #A00000;
        }
    </style>
  ```

  ```html
    <div class="container">
            <input type="text" class="inp" placeholder="输入内容">
            <ul id="list">
                
            </ul>
    </div>
  ```

  ```js
    $(".inp").bind("input",function () {
        var arr = [];
        $.ajax({
            url: "http://yang.happyknowshare.cn/api/products",
            type: "get",
            async: true,
            dataType: "json",
            success: (res) => {
                if(res.status == 200){
                    var data = res.data;
                    //过滤搜索函数
                    arr = data.filter((item,index)=>{
                        if(item.store_name.indexOf($(this).val()) > -1){
                            return true;
                        }
                    }) 
                }
                
                var html = ""

                for(let val of arr){
                    html += `<li>${val.store_name.slice(0,20)}</li>`;
                }

                $("#list").html(html);
            },
            error: (error) => {

            }
        })
    })

4.ajax基本写法分为几步

ajax原生请求主要分为创建对象, 初始化请求，设置header头(get可忽略)，设置回掉函数，发送请求send

```js
        var xhr =null;//创建对象 
        if(window.XMLHttpRequest){
        xhr = new XMLHttpRequest(); 
        }else{
        xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
        }
        xhr.open(“方式”,”地址”,”标志位”);//初始化请求 
        xhr.setRequestHeader(“”,”);//设置 http 头信息   
        xhr.onreadystatechange =function(){}//指定回调函数
        xhr.send();//发送请求

AJAX