AJAX学习笔记（全）

传统网站的应用问题
1.若想看到最新的数据，就只有再次从客户端发送http请求给服务端然后，再由服务端响应数据回来给客户端。
2.表单页面的验证，时间太长，用户体验不好。
3.页面的跳转，每次跳转一次，都要重新加载一次页面，造成资源的浪费。
ajax的定义
它是浏览器提供的一套方法 布局更新页面的数据
应用场景
1.页面向上拉加载更多
2.列表数据无刷新更新
3.表单项离开焦点数据的验证
4.搜索框提示文字下拉列表
运行环境
ajax技术需要运行网站环境中才能生效，用node启动一个服务器。
运行原理
AJAX技术需要运行再网站环境中才能生效，用node启动一个服务器
运行原理
传统的是：
由浏览器发送请求给服务器然后再由服务器响应数据回来给浏览器（在这个过程中，用户不能够有其他的操作）
ajax技术
可以把它比作为浏览器的代理人，收到服务器的响应过来的数据后使用dom方法渲染页面
实现步骤
1.首先创建一个ajax对象

var xhr = XMLHttpRequest()

返回的都是json数据格式（XML现在用的比较少了）
2.请求地址

xhr.open('get/post','地址')

3.发送请求

xhr.send()

4.获取服务器端的响应数据

xhr.onload=function(){
     
console.log(xhr.responseText)
}

这一步的原因：
因为发送请求与响应数据是需要很多时间的，所以给xhr对象添加一个onload方法，让它页面加载完成就发送请求。
（要先开启一个服务器，然后再创建一个html文件）

以JSON对象作为响应数据格式
在http请求与响应都会把对象类型转化为对象字符串类型再进行传输
请求参数
传统
1.通过表单传输的
2.AJAX技术中是使用xhr.open(‘get’,‘地址’)
post请求
xhr.setRequest(‘content-type’，‘传送数据的格式’)
注意：setRequest是请求报文，在HTTP请求和响应的过程中传递的数据块叫做报文，包括要传递的一些附加的信息和数据，这些数据和信息要遵守规定要的格式。
如果你的参数是多个字符串拼接，那么你在发送post请求时的报文类型要设置为application/x-www-form-unlencode
如果你的参数是对象字符串的类型，那么你要转化为对象类型的时候，你要使用JSON.parse()方法

如果你的参数是JSON类型的数据，那么你要在报文类型设置为application/json
将JSON对象转化为JSON对象字符串，使用的是JSON.stringfy()方法，传递的参数放在send（）里面
在接收的时候
你要借助body-parse接收参数发出响应（res.body）

错误处理方法
1.网络通畅服务器端能接收到请求，服务器端返回的结果不是预期的结果
status为状态码
2.服务器端没有接收到请求，
3.500状态码可以找到后端开发程序人员了，
4.网络中端无法发送到服务器
5.无法触发onload事件，但是你会触发error事件
AJAX在状态码指的是AJAX请求过程状态码
HTTP请求状态码表示服务器端返回的结果是服务器端返回的

低版本IE浏览器问题
1在低版本IE中ajax中有验证的缓存问题，即在请求地址不发生改变的情况下，只有第一次请求发送到服务器，后面她就直接从浏览器的缓存i面拿数据了，
解决方案：
1.在请求地址的后面加上请求参数，保证每一次请求的参数都不同
2.xhr.open(‘get’,‘http://localhost:3000/cahe?+’=’+Math.radom()’)
3.请求参数要考虑的问题
请求参数位置的问题
将请求参数传递到ajax函数内部，在函数内部更具请求方式将参数放置在不同的位置，get放在请求地址的后面
post放在send（）方法中

AJAX的封装

 <script>
        function ajax(options) {
     
            var defaults = {
     
                type: 'get',
                url: '',
                data: {
     },
                header: {
     
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                success: function () {
     },
                error: function () {
     }

            }
            //   使用options对象中的属性覆盖defaults对象中的属性
            Object.options(defaults, options)
            var xhr = new XMLHttpRequest();
            // 凭借请求参数的变量
            var params = ''
            // 循环对象传递过来的对象而格式参数
            for (var attr in defaults.data) {
     
                params += attr + '=' + defaults.data[attr] + "&"
            }
            //对字符串进行截取将参数最后一个&符号截取掉
            params = params.substr(0, params.length - 1)
            if (defaults.type == 'get') {
     
                defaults.url + defaults.url + '?' + params;
            }
            xhr.open(defaults.type, defaults.url);

            //如果请求方式为post
            if (defaults.type == 'post') {
     
                var ContentType = defaults.header['Content-Type']
                // 设置请求参数的类型
                xhr.setRequestHeader('Content-type', defaults.header['Content-Type'])
                //如果类型为JSON就

                if (ContentType == 'application/json') {
     
                    xhr.send(JSON.stringify(defaults.data))
                } else {
     
                    // 向服务器端传递普通类型的参数
                    xhr.send(params)
                }

            } else {
     
                xhr.send();
            }

            xhr.onload = function () {
     
                // 用来获取响应头中的数据
                var contentType = xhr.getResponseHeader('Content-Type')
                var responseText = xhr.responseText
                if (contentType.includes('application/json')) {
     

                    responseText = JSON.parse(responseText)
                }
                //当http状态码等于200的时候 
                if (xhr.status == 200) {
     
                    // 请求成功，调用处理成功情况的函数
                    defaults.success(responseText, xhr)
                } else {
     
                    // 请求失败 调用处理失败情况的函数
                    defaults.error(responseText, xhr)
                }

            }
        }
        ajax({
     

            url: 'http://localhost/3000/first',
            success: function (data) {
     
                console.log('z这是success函数' + data)
            }
        })
    </script>