2020-10-20(ajax的实现)

共勉：当有一天你满足于现状，觉得自己很努力的时候，你有很大的风险在走下披路。

ajax

首先ajax的全称是async javascript and xml(json)，异步的javascript和xml。ajax是异步的，此时要区分一个计算机中异步和同步的概念。同步：注意不是同时进行，比如说js是解释型语言，一行一行执行，而不是同时都执行。异步：最典型的例子是setTimeout,就是定时器不会阻碍下面语句的执行，同时进行的。用途：数据交互。下面进行简单的手写一个ajax函数： 思路：要想自己进行实现ajax函数的书写，首先明确这是一个函数，有参数，有返回值。ajax实现数据交互，那么就像我们进行问问题。要知道问谁（接口），怎么去问（请求方式），问问题的内容是什么（请求参数），最终问出来的结果是什么（成功的回调函数），是否是同步交流（异步问题）。 在参数的书写方面，由于我们传递的是多个参数，为了避免还要花时间区记住顺序问题，我们在这里选择的是通过传递一个对象来进行传递参数的内容。 代码实现：

超链接：这里是对上面的问题以及ajax更加细致的介绍：xhr请求的介绍 请原谅我这是一个很基础的very easy的问题，这里我自己复习一下 关于onreadystatechange

/** * @params {Object} options * method 请求方式 * url 请求地址 * isAsync 是否异步 * data 请求参数（发送的数据） * callback 拿到数据之后的回调函数 */ function ajax(options) { // 声明变量------------------------------------------------------------- // 使用xhr来进行存储传入的实际参数的值 // var xhr = new XMLHttpRequest(); var xhr = null; // 进行存储我们传入的参数 var url = options.url; var data = options.data; var method= options.method; var callback = options.callback || function (){}; var isAsync = options.isAsync; var dataStr = ""; //存储我们想要的字符串 // 进行处理------------------------------------------------------------- // 处理兼容性的问题，主要针对的是ie8之前的浏览器 if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject('Microsoft.XMLHTTP'); } else { return alert('当前的浏览器不支持的XMLHTTPRequest') } //进行数据的判断，将最终的返回是一个新的我们想要的字符串 if (typeof data == 'object') { for (var prop in data) { // 判断prop是不是自己的属性，而不是原型链上的属性 if(data.hasOwnProperty(prop)){ dataStr += prop + '=' + data[prop] + '&'; } } }else{ dataStr = data.toString(); } method = method.toUpperCase(); // open中的第一个参数是传递的方式，如果是get，需要将数据拼接在地址中 if ( method == 'GET') { // open方法进行建立连接 xhr.open(method, url + '?' + dataStr, isAsync); // send真正进行传递数据 xhr.send(); }else{ // 这里是非get请求方式 xhr.open(method,url,isAsync); // 我们是以什么样的格式进行传递的数据 // 需要设置请求头 // key=value&key1=value1&key2=value2..... Content-Type 代表的是编码方式 // "{key: value, key1: value1}" application/json xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); xhr.send(dataStr); //1.这里为什么要传递数据，而上面却不需要？ //原因：因为get方式在地址栏url已经进行了拼接 //2.为什么这里传入的是字符串？ //原因：因为我们上面设置请求头部的时候，第二个参数是key=value&的形式 } // 当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，继而实现响应。 xhr.onreadystatechange = function(){ // readystate 4: 请求已完成，且响应已就绪 // status 200: "OK" 404: 未找到页面 if(xhr.readystate == 4){ //响应就绪 if(xhr.status == 200){ //响应正确 // 调用回调函数，将我们成功获取到的数据进行返回 console.log(1111111); callback(xhr.reponseText); } } } }

思路：上面的代码在测试的时候出现了一些问题，我今天下午会进行更正。下面是思路，我们首先使用xhr创建一个对象，并且将XMLHttpRequest的对象用于客户端和服务器之间的异步通信，xhr建立通信主要有两个步骤，一个是客户端进行请求，另一个是客户端作出相应。 请求的时候有不同的方式，当为get的时候，需要将传输的数据拼接在地址url中，林外，客户端需要确定这个请求在什么时候完成，这时候就需要onreadystatechange来进行判断。 出现的问题：我在第二次实现的过程中发现的好多问题就是我在使用api的方法的时候，好多小驼峰明明的方法我都没有写正确，导致在控制台并没有报错，但是无法返回正确的结果，我们在测试上个学生管理系统的findall接口的时候，正确返回一下的结果，表示我们的ajax的函数书写正确。