原生JavaScript实现Ajax

一.Ajax基础

1.传统网站中存在的问题：

• 网速慢的情况下，页面加载时间长，用户只能等待。
• 表单提交后，如果一项内容不合格，需要重新填写所有表单内容。
• 页面跳转，重新加载页面，造成资源浪费，增加用户等待时间。

2.Ajax概述

它是浏览器提供的一套方法，可以实现页面无刷新更新数据，提高用户浏览网站应用的体验

3.Ajax的运行环境

Ajax 技术需要运行在网站环境中才能生效。

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

二.实现步骤

1.创建Ajax对象

var xhr=new XMLHttpRequest();

2.告诉Ajax请求地址以及请求方式

xhr.open('get','http://www.example.com');

3.发送请求

xhr.send();

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

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

三.服务器端响应的数据格式

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

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

JSON.parse();    //将Json字符串转化为Json对象

四.请求参数传递

传统网站表单提交

<form method="get" action="htttp://www.example.com">
       <input   type="text" name="username" />
       <input   type="text" pasword="password" />
</form>

• Get请求方式

xhr.open('get','htttp://www.example.com?'username=Lisi&password='123456')

• Post请求方式

 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 xhr.send('username=Lisi&password=123456');
 //或者传递JSON字符串
  xhr.setRequestHeader('Content-Type','application/json');
 xhr.send(JSON.stringify(data));

原生写法：

   var Ajax = {
            get: function (url, fn) {
                // XMLHttpRequest对象用于在后台与服务器交换数据
                var xhr = new XMLHttpRequest();
                //每当readyState改变时就会触发onreadystatechange函数
                //0: 请求未初始化
                //1: 服务器连接已建立
                //2: 请求已接收
                //3: 请求处理中
                //4: 请求已完成，且响应已就绪
                xhr.open('GET', url, true)
                xhr.onreadystatechange = function () {
                    //readyStatus == 4说明请求已经完成
                    if(xhr.readyState == 4 && xhr.status ==200) {
                        //从服务器获得数据
                        fn.call(this, xhr.responseText);
                    }
                };
                //发送数据
                xhr.send();
            },
            // datat应为'a=a1&b=b1'这种字符串格式，在jq里如果data为对象会自动将对象转成这种字符串格式
            post: function (url, data, fn) {
                var xhr = new XMLHttpRequest();
                xhr.open("POST", url, true);
                // 添加http头，发送信息至服务器时内容编码类型
                xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                xhr.onreadystatechange = function() {
                    if (xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 304)) {
                        fn.call(this, xhr.responseText);
                    }
                };
                //发送数据
                xhr.send(data);
            }

        }

Ajax封装
问题：发送一次请求代码过多，发送多次请求代码冗余且重复。

解决方案：将请求代码封装到函数中，发请求时调用函数即可。

 $.ajax({
                type: "post",
                url: 'http://www.example.com',
                async: false,
                contentType: "application/json",
                data: {},
                success: function (response) {
                    if (response.returnvalue == 1) {
                    }
                    error: function (XMLHttpRequest, textStatus,     errorThrown) {
                        console.log(errorThrown);
                    }
                }
            })

请求参数要考虑的问题：

​ 1.请求参数位置的问题：

​ 将请求参数传递到ajax函数内部, 在函数内部根据请求方式的不同将请求参数放置在不同的位置

​ get 放在请求地址的后面

​ post 放在send方法中

​ 2.请求参数格式的问题：

​ application/x-www-form-urlencoded => 参数名称=参数值&参数名称=参数值 => name=zhangsan&age=20

​ application/json => {name: 'zhangsan', age: 20}

学习别人的文章加深理解

Ajax请求的五个步骤