网易前端面试题

get类型语法:
    this.$http.get('url',{params:{key1:val1,key2:val2...}}).then((ok)=>{
        console.log(ok);
    },(err)=>{
        console.log(err);
    })
    
post类型语法:
    this.$http.post('url',{key1:val1,key2:val2…},{emulateJSON:true}).
	then((ok)=>{
         console.log(ok)
    },(err){
        console.log(err)
    })

get类型:
     axios.get("http://localhost:3000/get?uname=abc").then((ok) => {
                    console.log(ok);
                }).catch((err) => {
                    console.log(err);
     })//传值方式为在url后拼接 ? 加 key=val


post类型:
     var param = new URLSearchParams(); //改变发送数据的方式
                // 设置发送数据的内容
                param.append("uname", "szcszc");
                axios.post("http://localhost:3000/post", param).then((ok) => {
                    console.log(ok);
                }).catch((err) => {
                    console.log(err);
                })
   在post传值时,如果直接将值像get那样传递的话后端是无法收到的,因为ajax收到值的类型是form data格式,
   而Axios在发送数据的时候使用的方式是request payload格式
   所以后台无法正常接收,解决方法是使用URLSearchParams对象修改操作 URL传递参数的方法 


综合写法:
     // axios的综合写法
                // 既可以是get也可以是post
                axios({
                    url: "http://localhost:3000/get?uname=sss", //get发送数据方式1
                    // param:{uname:"zzz"}  get发送数据方式2
                    methods: "get"
                }).then((ok) => {
                    console.log(ok);
                })


                //post的写法
                var param = new URLSearchParams();
                param.append("uname", this.text);
                axios({
                    url: "http://localhost:3000/post",
                    method: "post",
                    // post发送数据的时候使用data属性
                    data: param
                }).then((ok) => {
                    console.log(ok);
                })          

var a = [1,2,3]
var b = [4,5,6]
var c = a.concat(b)  //c = [1,2,3,4,5,6]

var a = [1,2,3]
var b = [4,5,6]
var c = a.push.apply(a,b)

let arr1 = [1,2,3]
let arr2 = [2,3,4]
let arr = arr1.concat(arr2) //合并数组
let arrNew = new Set(arr)  //通过set集合去重
Array.from(arrNew)  //将set集合转化为数组//call的实现思路
Function.prototype.myCall = function (context){
  if (typeof this !== 'function') {
     throw new TypeError('Error')
  }
  var context = context || window
  //给context添加一个属性
  context.fn = this
  //通过参数伪数组将context后面的参数取出来
  var args = [...arguments].slice(1)
  var result = context.fn(...args)
  //删除 fn
  delete context.fn
  return result
}

.parent {  
        position: relative;
}
.child {  
        position: absolute;  
        left: 50%;  
        rigth: 50%;  
        transfrom: translate(-50%，-50%) 
}

.parent {  
           display: flex;  
           justify-content: center; //水平居中  
           align-items: center; //垂直居中 
}

Function.prototype.myCall = function (context){ 
if (typeof this !== 'function') { 
    throw new TypeError('Error') 
}
var context = context || window
//给context添加一个属性 
context.fn = this 
//通过参数伪数组将context后面的参数取出来 
var args = [...arguments].slice(1) 
var result = context.fn(...args) 
//删除 fn 
delete context.fn return result 
}

//apply的实现思路
Function.prototype.myApply = function (context) {
    if (typeof this !== 'function') {
     throw new TypeError('Error')
  }
    var context = context || window
    //为context添加一个属性
    context.fn = this
    var result 
    //判断是否存在第二个参数
    //如果存在就将第二个参数也展开
    if(arguments[1]) {
        result = context.fn(...arguments[1])
    } else {
        result = context.fn()
    }
    delete context.fn
    return result
}

Function.prototype.myBind = function (context) {
    if (typeof this !== 'function') {
        throw new TypeError('Error')
    }
    const _this = this 
    const args = [...arguments].slice(1)
    //返回一个函数
    return function F () {
        if (this instanceof F) {
            return new _this(...args, ...arguments)
        }
        return _this.apply(context,args.concat(...arguments))
    }
}

function createNew() {
  let obj  = {}
  let Sunday  = [].shift.call(arguments)
  obj.__proto__ = Sunday.prototype
  let result = Sunday.apply(obj,arguments)
  return result instanceof Object ? result : obj
}

<script src="http://test.com/data.php?callback=dosomething"></script>
// 向服务器test.com发出请求，该请求的查询字符串有一个callback参数，用来指定回调函数的名字
 
// 处理服务器返回回调函数的数据
<script type="text/javascript">
    function dosomething(res){
        // 处理获得的数据
        console.log(res.data)
    }
</script>

$.ajax({
    url: 'http://www.test.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  // 请求方式为jsonp
    jsonpCallback: "handleCallback",    // 自定义回调函数名
    data: {}
});

this.$http.jsonp('http://www.domain2.com:8080/login', {
    params: {},
    jsonp: 'handleCallback'
}).then((res) => {
    console.log(res); 
})

var xhr = new XMLHttpRequest(); // IE8/9需用window.XDomainRequest兼容
 
// 前端设置是否带cookie
xhr.withCredentials = true;
 
xhr.open('post', 'http://www.domain2.com:8080/login', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send('user=admin');
 
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        alert(xhr.responseText);
    }
};
 

$.ajax({
   url: 'http://www.test.com:8080/login',
   type: 'get',
   data: {},
   xhrFields: {
       withCredentials: true    // 前端设置是否带cookie
   },
   crossDomain: true,   // 会让请求头中包含跨域的额外信息，但不会含cookie
});
 

Vue.http.options.credentials = true

axios.defaults.withCredentials = true

// 两个页面都设置
document.domain = 'test.com';

// 父窗口打开一个子窗口
var openWindow = window.open('http://test2.com', 'title');
 
// 父窗口向子窗口发消息(第一个参数代表发送的内容，第二个参数代表接收消息窗口的url)
openWindow.postMessage('Nice to meet you!', 'http://test2.com');

// 监听 message 消息
window.addEventListener('message', function (e) {
  console.log(e.source); // e.source 发送消息的窗口
  console.log(e.origin); // e.origin 消息发向的网址
  console.log(e.data);   // e.data   发送的消息
},false);

function leak(){  

  leak="xxx";//leak成为一个全局变量，不会被回收  

}

// 人类 → 父类
 function Person() {
   this.name = '名字';
   this.age = 10;
   this.gender = '男';
 }
 Person.prototype.sayHi = function () { console.log('你好'); };
 Person.prototype.eat = function () { console.log('我会吃。。。'); };
 Person.prototype.play = function () { console.log('我会玩'); };


 // 学生类 → 子类
 function Student() {
   this.stuId = 1000;
 }
 // 子类的原型prototyp指向父类的一个实例对象
 Student.prototype = new Person();
 // 添加一个constructor成员
 Student.prototype.constructor = Student;

 // 如何实现原型继承：
 // 给子类的原型prototype重新赋值为父类的一个实例对象。
 // 利用了原型链上属性或方法的查找规则。


 // 创建一个学生对象
 var stu1 = new Student();
 console.log(stu1.constructor)

class Parent {
  constructor(value) {
    this.val = value
  }
  getValue() {
    console.log(this.val)
  }
}
class Child extends Parent {
  constructor(value) {
    super(value)
    this.val = value
  }
}
let child = new Child(1)
child.getValue() // 1
child instanceof Parent // true

console.log(a);  //ReferenceError: a is not defined
let a = "apple";
 
console.log(b);  //undefined
var b = "banana";

var PI = "a";
if(true){
  console.log(PI);  // ReferenceError: PI is not defined
  const PI = "3.1415926";
}

var xhttp;

if (window.XMLHttpRequest) {

//现代主流浏览器

xhttp = new XMLHttpRequest();

} else {

// 针对浏览器，比如IE5或IE6

xhttp = new ActiveXObject("Microsoft.XMLHTTP");

}

public boolean preHandle(HttpServletRequest request, HttpServletResponse response,Object obj) throws Exception {
        
        //获取判定登陆的session是否存在
        String token = (String) request.getSession().getAttribute("token");
        String postId = (String) request.getSession().getAttribute("postId");
        if(token == null || token == ""){
            String XRequested =request.getHeader("X-Requested-With");
            if("XMLHttpRequest".equals(XRequested)){
                response.getWriter().write("IsAjax");
            }else{
                response.sendRedirect("/m-web/user/toLogin");
            }
            return false;
        }
        if(postId == null || postId == ""){
            String XRequested =request.getHeader("X-Requested-With");
            if("XMLHttpRequest".equals(XRequested)){
                response.getWriter().write("IsAjax");
            }else{
                response.sendRedirect("/m-web/user/toLogin");
            }
            return false;
        }
        return true;
    }

success:function(data){
    if(data == "IsAjax"){
        window.location.href="m-web/user/toLogin"
        return;
    }
}

if ( isSuccess ) {// if no content
                if ( status === 204 || s.type === "HEAD" ) {
                    statusText = "nocontent";

                // if not modified
                } else if ( status === 304 ) {
                    statusText = "notmodified";

                // If we have data, let's convert it
                } else {
                    statusText = response.state;
                    success = response.data;
                    error = response.error;
                    isSuccess = !error;
                    //解决ajax拦截问题
                    var result = responses.text;
                    if(result.indexOf("IsAjax")>=0){
                        window.location.href="m-web/user/toLogin";
                        return;
                    }
                }
            }

var express = require("express");
var app = express();
// 通过post的方法获取页面的信息
// 1.npm下载bodyParser  2.引用
var bodyParser = require("body-parser");
// 3.设置
var uE = bodyParser.urlencoded({ extended: false });

// 中间件解决跨域问题
app.use(function(req, res, next) {
    // 解决跨域
    res.header('Access-Control-Allow-Origin', '*');

    res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');

    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
    next();
})

app.get("/", function(req, res) {
    // 接收前台发过来的数据
    //用get的方式获取前台的数据使用req.query.xxx
    console.log(req.query.num);
    res.send("我是get的接口");
})


// 4.把解析功能传入
app.post("/post", uE, function(req, res) {
    //用post的方式获取前台数据使用req.body.xxx
    console.log(req.body.num);
    res.send({
        status: 200,
        content: "我是post的接口"
    });
})

app.listen(3001);
 
 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
</head>

<body>
    <button>点我进行数据请求</button>

    <script>
        $("button").eq(0).on("click", function() {
            $.ajax({
                url: "http://localhost:3001/post",
                type: "post",
                data: {
                    num: 123
                },
                success(data) {
                    console.log(data);
                }
            })
        })
    </script>

</body>

</html>

var express=require("express");
// 初始化express
var app=express();



// 定义中间件（每一次接收到请求后都会先经过中间件）
app.use(function(req,res,next){

    console.log("你好")


    next()//下一步
})



// 创建服务
app.get("/",function(req,res){
    res.send("aaaaaaa");
})


// 路由的使用
app.get("/index",function(req,res){
  
    res.send("我是index")
})

app.get("/home",function(req,res){
   
    res.send("我是home")
})

app.get("/post",function(req,res){
 
    res.send("我是get的post")
})

app.get("/a*",function(req,res){
   
    res.send("我是路径通配符选择的")
})

// 接受一个post请求
app.post("/post",function(req,res){
    res.send("我是一个post请求")
})


app.listen(3000)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登陆页面</title>
</head>
<body>
    
    <form action="http://localhost:3001/login">
        <input type="text" name="uname"/>
        <input type="text" name="upwd"/>
        <input type="submit" value="登陆">
    </form>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>注册页面</title>
</head>
<body>
    
    <form action="http://localhost:3001/zhuce">
        <input type="text" name="uname"/>
        <input type="text" name="upwd"/>
        <input type="submit" value="注册">
    </form>

</body>
</html>

var http=require("http");
var url=require("url");
http.createServer(function(req,res){
    res.writeHead(200,{"Content-type":"text/html;charset=utf-8"});
    // 解决二次请求

    var pathurl=url.parse(req.url);
    if(pathurl.pathname=="/favicon.ico"){
        return;
    }


// 路由
    if(pathurl.pathname=="/login"){
        res.end("您执行了登陆的后台功能");
    }else if(pathurl.pathname=="/zhuce"){
        res.end("您执行了注册的后台功能");
    }else{
        res.end("您的请求有误  请核实后在进行请求");
    }
}).listen(3001)

console.log(1);
var timer = window.setTimeout(function(){console.log(2)},0);
console.log(3);

 <production>
        <price>100元</price>
        <name>洗衣机</name>
 </production> 

//1.创建ajax的实例
      let xhr = new XMLHTTPRequest();//后边的()可写可不写
      let xhr = new XMLHTTPRequest；

//2.请求配置项
    xhr.open([请求方式],[请求路径],[ASYNC,默认是true],[USERNAME],[USERPASS]);
    //请求方式    下边所有的请求方式都能够给服务器发送请求，也可以从服务器获取内容
    //get/delete/head/options..
    
    //post/put
    
    //get/post
    //一般来讲get用来从服务器获取内容   获取的多，给的少
    //post：获取的少给的多
    //delete:从服务器删除一些内容
    //head:只获取服务器响应头信息
    //options:客户端对服务器的测试请求
    
    //当前给服务器发送请求的时候如果用的get一般给服务器传递阐述用?传参
    https://hellojoy.jd.com:443/?itemid=12560&babelChannel=1500725&activityId=2wbhW341AywcD3Xyv9sR5MhCPFAL&linkIds=4713019,2828306,3986352&source=02
    

//3.发送请求
    xhr.send([请求主体]);//发送给服务器的内容放到请求主体中

//4.监听通讯的内容


//readySate:ajax请求状态
UNSENT: 0   ajax实例还没有创建
OPENED: 1   参数开始配置
HEADERS_RECEIVED: 2   客户端已经开始接收服务器端响应头信息 （返回状态码，日期....）
LOADING: 3  正在准备加载服务器端响主体内容
DONE: 4   响应主体的内容已经获取完毕了



//status:HTTP网络状态码

200：ok请求状态成功（虽然请求成功了，但是拿到的内容不一定是你想要的）
301：永久从定向（永久转移）
307 Internal Redirect：临时重定向   把http转为htts
304 Not Modified :从缓存当中获取
302 Move Temporarily  临时转移（负载均衡） 当服务器的并发数不能承受的时候，把部分访问转移其它服务及集群
404:not Found  找不到
400：请求参数错误
500 Internal Server Error 未知错误
503 Service Unavailable 服务器超负荷




//onreadystatechanage监听状态改变
xhr.onreadystatechanage = ()=>{
    if(！/^(2|3)\d{2}$/.test(xhr.sataus))return;
    if(xhr.readyState ==2){
    }
    
    if(xhr.satus ==200 &&xhr.readyState == 4){
    
    }
}