Web全栈20210115-ajax及使用函数来创建对象

什么是ajax：最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。
- 作用：做前后端数据交互的，后端提供数据接口比如 java php nodejs，返回数据到前台
- 异步编程：局部刷新
  1-2同步和异步：// 同步：请求执行完成之后在去执行后续代码（等待请求完成） false， // 异步：请求和后续代码同时执行（不需等待） true
五步法写ajax：考虑的兼容是 ie5 ie6（已经被淘汰，不用考虑了）
2-1.实例化请求对象
var http=new XMLHttpRequest();
2-2.建立服务器连接 http.open();
2-2-1.请求方式 get post
2-2-2.url 服务器接口
2-2-3.async 指当前的请求是同步还是异步 false/true
2-2-4 用户名和密码（安全）
2-3.监听服务器响应有四个状态为 1(已经建立服务器连接） 2(开始响应) 3(正在响应) 4(响应完成)
服务器响应状态代码 404（页面丢失） 200（成功） 500（服务器报错）
http.onreadystatechange=function (){ 匿名函数回调
//服务器响应
if(http.readyState4&&http.status200)相应完成并且成功
{
2-5.响应成功数据界面渲染
//可以获取数据
//服务器返回是json
http.response
http.responseText
//如果后台返回数据格式是xml(自定义的html格式)
http.responseXML 数据在这三个中
}
}
2-4.发送请求 http.send();
send方法的参数取决于请求方式： get post
get 请求的数据格式是 url+"?id=1&name=111"
post 不请求， send() 方法上直接传递数据
原生ajax封装采用js代码异步编程（）
原生js里面类似这个编程异步编程，解决方式是匿名函数回调的方法
原生js ajax不支持同步原生js是单线程

function  ajax(method,url,data,callback){
    
    
    var http=new XMLHttpRequest();
    //请求方式不同代码不同所以进行检测
    if(method=="get")
    {
    
    
        if(data)
        {
    
    
            url+="?";
            url+=data;//data   id=100&name==1
        }
        http.open(method,url,true);
        http.send();
    }
    else{
    
        ==post请求==
        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);  ==call  back是匿名函数回调== 
        }
    }
}

//需要执行请求获取数据
ajax('get','http://127.0.0.1/getStudentInfo',null,function (ags){
    
    
    console.log(ags);
});

注意
原生ajax在请求接口的时候如果使用的是本地服务器比如// http://localhost:63342/main/index.html// https://sp0.baidu.com/s?wd=1
不一致时会产生跨域
4-1协议不一样 http ， https
4-2主机名称不一致 localhost （就是127.0.0.1 ）， sp0.baidu.com （124.3.9.21）
4-3端口号不一致 63342 ，80（没有写默认80端口）

会报错 Access-Control-Allow-Origin 产生跨域在这里插入图片描述

4-4如何解决跨域
4-1 cros跨域（跨域资源共享）：在后端 java php node 配置响应头， header(“Access-Control-Allow-Origin”,"*"); 允许所有来访问 http://localhost:63342
4-2jsonp跨域，不是原生ajax 都是get请求。原理是采用src可以远程连接。前端请求接口传递数据和回调函数到接口 // http://www.maodou.com?id=10086&cb=getdata后端要接收回调函数操作完成之后响应到前端。

使用函数创建对象：直接使用函数写对象，函数里面的this指针 window
5-1自定义对象

//js 编程  es5没有class类的体现   ，有function，来构造函数
//es6  class  类  ---向后端走
function  people(){
    
    
 this.name="";
 this.age="";
 this.sex="";
 this.sleep=function (){
    
    
 return "睡觉";
 };
 this.eat=function (){
    
    
 return "吃饭"
 }
 }
//这样是使用
//people();  //  this 指向 window

5-2使用new这个关键字， new里面在替换this指针，不指向wiindow，指向当前对象。
5-2-1// new 实例化 people这个函数构建新的对象替换this指针，函数people 就是当前类的构造函数

 var xiaoming=new people();
     //console.log(xiaoming.sleep());//对象.属性
     console.log(xiaoming);

实例对象的原型链等于函数的原型对象

   console.log(xiaoming.__proto__ == people.prototype);
     //原型对象的构造指向本身
     console.log(people.prototype.constructor==people);

5-2-2new 实例化原理

    function people(name, age, sex) {
    
    
        this.name = name;
        this.age = age;
        this.sex = sex;
        this.sleep = function () {
    
    
            return "睡觉";
        };
        this.eat = function () {
    
    
            return "吃饭"
         
        }
    }

    //建立一个new的匿名函数
var New = function (o) {
    
    
 var obj = {
    
    };//创建一个基本对象
        //对象的原型连=函数的原型对象
obj.__proto__ = o.prototype;
        //函数的原型对象的构造函数指向本身
 o.prototype.constructor = o;

        //考虑原函数的属性和方法  以及传递的参数
var args = Array.prototype.slice.call(arguments, 1); //["maodou",20,"男"]
o.apply(obj, args);
return obj;
    }
 var maodou = New(people, "maodou", 20, "男");
console.log(maodou);

面试题：自己写一个排序使用数组来执行

  Array.prototype.mySort = function () {
    
    
        return this.sort();
    }
    var str = [2, 3, 1, 4];
    console.log(str.mySort());

函数的原型对象

    function Animal() {
    
    
 }

    //输出的是当前函数的原型对象
    console.log(Animal.prototype);
    //函数的原型对象的构造函数  指向  本身
    console.log(Animal.prototype.constructor);

    //原型对象上面可以写入原型方法原型属性
    //原型属性
   Animal.prototype.sex=null;
     Animal.prototype.age=null;
     Animal.prototype.name=null;

     //原型方法
     Animal.prototype.eat=function (){
    
    
     console.log("吃饭");
     }
     Animal.prototype.sleep=function (){
    
    
     console.log("睡觉");
     }

     console.log(Animal.prototype);

原型对象上的属性方法全是共享的

Web全栈20210115-ajax及使用函数来创建对象

猜你喜欢