js常见知识点1.ajax相关

时间：2021-08-02 07:52:26

一、 javascript中的typeof返回哪些数据类型？

建议回复：

　　typeof 运算符把类型信息当作字符串返回。typeof 返回值有六种可能： number, string, boolean,object,function, 和undefined.但是如果是数据类型的话应该还要包括一种 null,它的返回值类型是object.

二、 如何判断某变量是否为数组数据类型？

建议回复：

　　instanceof 可以通过这个关键字确定某个对象是否是一个数组，如果是数组，返回true，否则返回false.用typeof只能测出一个数组是一个对象，而非数组.instanceof的用法：boolean flag = str instanceof String;     boolean flag = arr instanceof Array;

三、 例举js中 3种强制数据类型转换,2种隐式数据类型转换？

建议回复：

　　(1)强制转换

var a = 10;

var b = a.toString(); // 把数字转换为字符串

alert( typeof b );　　　
a = "10";

b = Number(a); // 把字符串转换为数字

alert( typeof b );

　　除此之外还有 Boolean、parseInt、parseFloat等等

　　（2）隐式转换　

var a = 10;

var b = ""+a; // 把数字转换为字符串

alert( typeof b );
a = "10";

b = a*1;

alert( typeof b ); // 把字符串转换为数字

四、 split() 和 join() 的区别?

建议回复：

　　split()是字符串的操作方法，根据给定的字符将一个字符串切割成数组.　　语法： str.split（"字符"）.

　　join()是数组的操作方法，将一个数组根据给定的字符连接成字符串.　　 语法：arr.join("字符").

五、 jsonp如何实现跨域？

建议回复：

　　jsonp跨域的原理： 通过动态创建script标签，然后设置src的路径为服务器提供的接口路径，通过一个回调函数callback将服务器信息返回。

　　

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="button" value="jsonp的跨域访问数据" id="btn" />

    </body>

</html>

<script>

    function data(result){

        console.log(result);

    }

    document.getElementById("btn").onclick=function(){

        var script=document.createElement("script");

        script.type="text/javascript";

        script.src="http://api.k780.com:88/?app=weather.future&weaid=1&appkey=22429&sign=c40ab8059466430ccc34526cb8d94a6b&format=json&jsoncallback=data";

        document.body.appendChild(script);

    }

</script>

六、 什么是同源策略？

建议回复：

　　所谓的同源 就是指 ajax在请求数据时， 保证  协议、域名、端口号 完全一致，才能够通过请求。

　　ajax不能实现跨域请求数据（受同源策略的影响不能实现跨域）。

七、 同步和异步的区别？

建议回复：
  • 首先同步异步于阻塞非阻塞并没有关系。同步异步主要是事情做完以后，如何进行处理、或者说关注的是一种消息通信机制。
  • 同步的情况下，是由处理消息者自己去等待消息是否被触发；
  • 而异步的情况下是由触发机制来通知处理消息者；
  • 异步：同时执行，也叫并发执行（生活中的同步）,如定时器就是异步的；同步就是顺序执行。

举例： 比如在上课时，你问老师一个问题，这个问题可能需要花费一点时间去思考，这个时候老师可能：

  1. 思考，思考……，好了，有答案了；
  2. 这个问题需要一点时间，你先做点别的，等我想好了，去找你。

第一种就是同步，第二种就是异步。所以同步异步可以说是对被请求方来说的，被请求者使用什么方式来告知处理结果。

  • 阻塞非阻塞，主要是对于请求者而言的。
  • 阻塞：发出请求等待结果返回，然后再处理后续的事情；
  • 非阻塞：发出请求不等待结果返回，可以接着做后续的事情；

举例，还是上一个例子：

  1. 老师在使用同步思考的时候，你可以静静的等待老师给出答案，也可以边做自己的事情边等待老师的回答，当然这时候你需要时刻去关注老师是否已经想好了，在程序中需要进行轮询了。乀(ˉεˉ乀)
  2. 老师使用异步的方式，这个时候老师告诉你可以先去做别的，好了就通知你，那么你可以去做点别的，然后监听事件就行，当然你也可以很轴，我就不做别的！我要一直等着老师“想好了”的事件发生。
  3. 所以同步可以是阻塞的也可以是非阻塞的，异步也是如此。

八、 进程和线程

建议回复：　　
1.定义

　　进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动进程是系统进行资源分配和调度的一个独立单位.

　　线程是进程的一个实体, 是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位.线程自己基本上不拥有系统资源,只拥有一点在运行中必不可少的资源(如程序计数器,一组寄存器和栈),但是它可与同属一个进程的其他的线程共享进程所拥有的全部资源.

2.关系

　　一个线程可以创建和撤销另一个线程 同一个进程中的多个线程之间可以并发执行.

　　相对进程而言，线程是一个更加接近于执行体的概念，它可以与同进程中的其他线程共享数据，但拥有自己的栈空间，拥有独立的执行序列。

3.区别

　　进程和线程的主要差别在于它们是不同的操作系统资源管理方式。进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响，而线程只是一个进程中的不同执行路径。线程有自己的堆栈和局部变量，但线程之间没有单独的地址空间，一个线程死掉就等于整个进程死掉，所以多进程的程序要比多线程的程序健壮，但在进程切换时，耗费资源较大，效率要差一些。但对于一些要求同时进行并且又要共享某些变量的并发操作，只能用线程，不能用进程。

　　1) 简而言之,一个程序至少有一个进程,一个进程至少有一个线程.

　　2) 线程的划分尺度小于进程，使得多线程程序的并发性高。

　　3) 另外，进程在执行过程中拥有独立的内存单元，而多个线程共享内存，从而极大地提高了程序的运行效率。

　　4) 线程在执行过程中与进程还是有区别的。每个独立的线程有一个程序运行的入口、顺序执行序列和程序的出口。但是线程不能够独立执行，必须依存在应用程序中，由应用程序提供多个线程执行控制。

　　5) 从逻辑角度来看，多线程的意义在于一个应用程序中，有多个执行部分可以同时执行。但操作系统并没有将多个线程看做多个独立的应用，来实现进程的调度和管理以及资源分配。

　　这就是进程和线程的重要区别。

4.优缺点
　　线程和进程在使用上各有优缺点：线程执行开销小，但不利于资源的管理和保护；而进程正相反。同时，线程适合于在机器上运行，而进程则可以跨机器迁移。

九、 ajax的相关

1.ajax的定义

　　异步的javascript and xml,是一种提供动态交互的网页开发技术。

2.ajax的作用

　　当向后台发送少量的数据时，通过ajax技术可以实现页面的局部刷新，提高程序的运行效率。ajax技术可以实现整个页面的无刷新。

3.ajax的请求方式

　　get方式，从服务器获取数据，传送的数据量小，安全性低.

　　post方式，向服务器发送数据，输送的数据量没有要求 安全性高.

4.ajax请求数据的过程

　　(1)、准备一个ajax对象
　　兼容写法：
    　　 if( window.XMLHttpRequest ){
         　　 ajax = new XMLHttpRequest();
    　　 }else{
          　　ajax = new ActiveXObject("Microsoft.XMLHTTP");
     　　}
 
　　(2)、和服务器建立连接 --  通过  open方法
 　　ajax.open("get","url",true);
　　第一个参数：  请求方式
　　第二个参数：  请求路径
　　第三个参数：  同步还是异步    true 表示异步
 
　　(3)、发送数据   
 　　ajax.send();
 
　　(4)、服务器相应数据 并将处理的结果返回给客户端
     　　通过 onreadystatechange 事件 相应服务器 的数据
     　　根据readyState 判断状态值    值为4请求服务器成功
     　　根据status 判断状态码        值为200 交易成功
     　　通过responseText 属性获取服务器传递的数据
 
     　　ajax.onreadystatechange = function(){
             　　 if( ajax.readyState == 4 ){
                  　　 if( ajax.status == 200 ){
                        　　//交易成功  返回数据
                      　　  alert( ajax.responseText );//服务器将处理的结果 通过responseText属性返回给客户端
                  　　 }
             　　 }
            }
　　<script type="text/javascript">
　　　　　//1 创建一个ajax对象

        //var ajax = new XMLHttpRequest();

        //var ajax = new ActiveXObject("Microsoft.XMLHTTP");

        var ajax = null;

        if( window.XMLHttpRequest ){

            ajax = new XMLHttpRequest();

        }else{

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

        }

        //2 和服务器建立连接

        ajax.open("get","data.txt",true);

        //4 服务器相应数据 并将处理的结果返回给客户端

        ajax.onreadystatechange = function(){

            if( ajax.readyState == 4 && ajax.status == 200 ){//交易成功  返回数据

                    alert( ajax.responseText );//服务器将处理的结果 通过responseText属性返回给客户端

            }

        }

        //3 发送数据

        ajax.send();

　　</script>

十、封装ajax并应用

　封装的ajax请求代码ajaxGET.js

// url :请求路径

// callback :  该参数是一个函数，回调函数

function ajaxGet(url,callback){

    var ajax = null;

    if( window.XMLHttpRequest ){

        ajax = new XMLHttpRequest();

    }else{

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

    }

    ajax.open("GET",url,true);

    ajax.onreadystatechange = function(){

        if( ajax.readyState == 4 && ajax.status == 200 ){

            if(callback){

                callback(ajax.responseText);//通过函数的调用将服务器处理的结果以参数形式传递给前端

            }

        }

    }

    ajax.send();

}

对上面封装函数的应用

selectCard.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

            .box {

                width: 400px;

                margin:100px auto;

                border:1px solid #ccc;

            }

            .top button.purple {

                background-color: purple;

            }

            .bottom div{

                width:100%;

                height: 300px;

                background-color: pink;

                display: none;

            }

            .bottom div.show{

                display:block;

            }

        </style>

        <script src="ajaxGET.js"></script>

    </head>

    <body>

        <div class="box">

            <div class="top">

                <button class="purple">第一个</button>

                <button>第二个</button>

                <button>第三个</button>

                <button>第四个</button>

                <button>第五个</button>

            </div>

            <div class="bottom" id="divs">

                <div class="show" id="show">1好盒子</div>

            </div>

        </div>

    </body>

</html>

<script>

    //请求后台时   传递当前点击的按钮下标

    var oBtns = document.getElementsByTagName("button");

    var oDiv = document.getElementById("show");

    for (let i = 0 ; i < oBtns.length ; i++) {

        oBtns[i].onclick = function(){

            url="selectCard.php?id="+i;

            ajaxGet(url,function(msg){

                oDiv.innerHTML=msg;

            });

        }

    }

</script>

selectCard.php

<?php

    $id=$_GET["id"];

    $arr=array("dancer1","dancer2","dancer3","dancer4","dancer5");

    echo $arr[$id];

?>

十一、GET和POST的区别，何时使用POST？

建议回复：

　　GET和POST的区别：

　　GET：一般用于查询数据，使用URL传递参数，由于浏览器对地址栏长度有限制，所以对使用get方式所发送信息的数量有限制，同时浏览器会记录（历史记录，缓存）中会保留请求地址的信息，包括地址后面的数据。get 只能发送普通格式（URL 编码格式）的数据。

　　POST：一般用于向服务器发送数据，对所发送的数据的大小理论上是没有限制，浏览器会缓存记录地址，但是不会记录 post 提交的数据。post 可以发送纯文本、URL编码格式、二进制格式的字符串，形式多样。

　　在以下情况中，请使用 POST 请求：

  1. 以提交为目的的请求（类似语义化，get 表示请求，post 表示提交）；
  2. 发送私密类数据（用户名、密码）（因为浏览器缓存记录特性）；
  3. 向服务器发送大量数据（数据大小限制区别）；
  4. 上传文件图片时（数据类型区别）；

get请求案例：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="text" id="txt" />

        <div id="d"></div>

    </body>

</html>

<script type="text/javascript">

    //失去焦点时，判断用户名的唯一性

    oTxt = document.getElementById("txt");

    oDiv = document.getElementById("d");

    oTxt.onblur = function(){

        var ajax = new XMLHttpRequest();

        ajax.open("GET","checkname.php?username="+oTxt.value,true);

        ajax.onreadystatechange = function(){

            if(ajax.readyState == 4 && ajax.status == 200){

                oDiv.innerHTML =  ajax.responseText;

            }

        }

        ajax.send();

    }

</script>

后台模拟数据库代码：

<?php

    //后台实现唯一性验证

    //服务器接收客户端请求的数据

    $uname = $_GET["username"];

    $arr = array("admin","xm","xh");//数组模拟数据库

    //判断$uname 在  $arr 中是否存在

    $flag = true;//定义一个开关 值为true表示用户名不存在  可以注册

    foreach( $arr as $v ){

        if( $uname == $v ){ //说明用户名存在

            $flag = false;

            break;

        }

    }

    //判断flag值  如果为true，返回 可以注册

    if( $flag ){

        echo "可以注册";

    }else{

        echo "用户名已存在，换一个 ";

    }

?>

post请求案例

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <input type="button" value="ajax请求" id="btn" />

    </body>

</html>

<script>

    document.getElementById("btn").onclick=function(){

        var ajax=new XMLHttpRequest();

        ajax.open("POST","postRequest.php",true);

        //设置请求头：

        ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

        ajax.send("uname=admin&upwd=123");

        ajax.onreadystatechange=function(){

            if(ajax.readyState==4&&ajax.status==200){

                switch(ajax.responseText){

                    case "0":alert("登录失败");break;

                    case "1":alert("登录成功");break;

                }

            }

        }

    }

</script>

后台代码：

<?php

    $name=$_POST["uname"];

    $pwd=$_POST["upwd"];

    if($name=="admin"&&$pwd=="123"){

        echo 1;

    }else{

        echo 0;

    }

?>

既然模拟了后台数据库，当然现实是不会让你模拟的，只会提供一个接口，那么我们就再来看看这种情况，给你个接口自己体会http://datainfo.duapp.com//shopdata//datainfo.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        用户名：<input type="text" id="txtName"/>

        密码：<input type="text" id="txtPwd"/>

        <input type="button" value="注册" id="btn"/>

        <div id="reg"></div>

        <hr />

        用户名：<input type="text" id="tname" />

        密码：<input type="text" id="tpwd" />

        <input type="button" value="登录" id="btn2"/>

        <div id="login"></div>

    </body>

</html>

<script type="text/javascript">

    //http://datainfo.duapp.com//shopdata//datainfo.html

    function $(id){

        return document.getElementById(id);

    }

    $("btn").onclick = function(){

        var ajax = new XMLHttpRequest();

        var data = "status=register&userID="+$("txtName").value+"&password="+$("txtPwd").value;

        ajax.open("GET","http://datainfo.duapp.com/shopdata/userinfo.php?"+data,true);

        ajax.onreadystatechange = function(){

            if( ajax.readyState==4 && ajax.status == 200 ){

                switch(ajax.responseText){

                    case "0":$("reg").innerHTML = "用户名重名";break;

                    case "1":$("reg").innerHTML = "注册成功";break;

                    case "2":$("reg").innerHTML = "数据库错误";break;

                }

            }

        }

        ajax.send();

    }

    $("btn2").onclick=function(){

        var ajax = new XMLHttpRequest();

        var data = "status=login&userID="+$("tname").value+"&password="+$("tpwd").value;

        ajax.open("GET","http://datainfo.duapp.com/shopdata/userinfo.php?"+data,true);

        ajax.onreadystatechange = function(){

            if( ajax.readyState==4 && ajax.status == 200 ){

                switch(ajax.responseText){

                    case "0":$("login").innerHTML = "用户名不存在";break;

                    //case "1":$("login").innerHTML = "登录成功";break;

                    case "2":$("login").innerHTML = "用户名密码不符";break;

                    default:$("login").innerHTML = "登录成功"+ajax.responseText;

                }

            }

        }

        ajax.send();

    }

</script>

十二、 AJAX 的局限性?

建议回复：
  1. AJAX 不支持浏览器 back 按钮。
  2. 安全问题 AJAX 暴露了与服务器交互的细节。
  3. 对搜索引擎的支持比较弱。不会执行你的 JS 脚本，只会操作你的网页源代码；
  4. 跨域请求有一定限制。解决方式：jsonp；

相关文章