如何多次给同一元素绑定多种同类型的事件、说明 localStorage 和 sessionStorage 的区别、localStorage 和 sessionStorage 和 cookies 的区别、使用 jquery 完成一个 ajax 请求、http 常见的状态码有哪些

1-如何多次给同一元素绑定多种同类型的事件？　　

一、onclick()方式

 

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绑定多个事件</title>
 6     <script>
 7         window.onload = function(){
 8             document.getElementById('btn').onclick = function () {
 9                 alert(1);
10             };
11             document.getElementById('btn').onclick = function () {
12                 alert(2);
13             };
14         }
15     </script>
16 </head>
17 <body>
18 <button id="btn">点我</button>
19 </body>
20 </html>
复制代码

 

运行结果是第二个onclick把第一个onclick给覆盖了，虽然大部分情况用on就可以完成想要的结果，但是有时又需要执行多个相同的事件，很明显如果用on不能完成

二、addEventListener()方法

复制代码
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>绑定多个事件</title>
 6     <script>
 7         window.onload = function(){
 8             document.getElementById('btn').addEventListener('click', function(){
 9                 alert(1);
10             }, false);
11             document.getElementById('btn').addEventListener('click', function(){
12                 alert(2);
13             }, false);
14         }
15     </script>
16 </head>
17 <body>
18 <button id="btn">点我</button>
19 </body>
20 </html>
复制代码
2-说明 localStorage 和 sessionStorage 的区别

　　localStorage

        localStorage的生命周期是永久性的。假若使用localStorage存储数据，即使关闭浏览器，也不会让数据消失，除非主动的去删除数据，使用的方法如上所示。localStorage有length属性，可以查看其有多少条记录的数据。使用方法如下：


var storage = null;
if(window.localStorage){ //判断浏览器是否支持localStorage
storage = window.localStorage;
storage.setItem("name", "Rick"); //调用setItem方法，存储数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 Rick
storage.removeItem("name"); //调用removeItem方法，移除数据
alert(storage.getItem("name")); //调用getItem方法，弹框显示 name 为 null

}
       localStorage 相对sessionStorage简单一点，需要注意的地方不是很多。

       sessionStorage

       sessionStorage 的生命周期是在浏览器关闭前。也就是说，在整个浏览器未关闭前，其数据一直都是存在的。sessionStorage也有length属性，其基本的判断和使用方法和localStorage的使用是一致的。需要注意的有以下几点：

       <1> 页面刷新不会消除数据

       为了验证，我准备了两个html文件，一个是index.html，另一个是text.html。至于text.html后面在详细说其起的左右。二者的html代码如下：

       index.html


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<script>
function submit() {
var str = document.getElementById("text").value.trim();
setInfo(str);
document.getElementById("text").value = "";
}
//储存数据
function setInfo(name) {
var storage = window.sessionStorage;
storage.setItem('name', name);
}
//显示数据
function shows() {
var storage = window.sessionStorage;
var str = "your name is " + storage.getItem("name");
document.getElementById("text").value = str;
}
</script>
</head>
<body>
<input type="button" value="Login" οnclick="submit()" />
<input type="text" name="text" id="text" />
<input type="button" value="show" οnclick="shows()" />
<a href="text.html" target="_blank">点击打开</a>
</body>

3-localStorage 和 sessionStorage 和 cookies 的区别
　localStorage、sessionStorage、Cookie共同点:

都保存在浏览器端，且是同源的（顺便解释一下同源：域名、协议、端口号相同）

localStorage、sessionStorage、Cookie不共同点:
存储大小的不同：
localStorage的大小一般为5M
sessionStorage的大小一般为5M
cookies的大小一般为4K
有效期不同：
localStorage的有效期为永久有效，除非你进行手动删除。
sessionStorage在当前会话下有效，关闭页面或者浏览器时会被清空。
cookies在设置的有效之前有效，当超过有效期便会失效。
与服务器端的通信
localStorage不参与服务器端的通信。
sessionStorage不参与服务器端的通信。
cookies参与服务器端通信，每次都会携带http的头信息中。（如果使用cookie保存过多数据会带来性能问题）
localStorage和sessionStorage的作用域的区别详解
不同浏览器无法共享localStorage或sessionStorage中的信息。
相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。

4-使用 jquery 完成一个 ajax 请求　
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>
    <title>jquery</title>
</head>
<body>
    <div id="content"></div>
    <button id="btnLoad">Load载入</button>
    <button id="btnGet">Get载入</button>
    <button id="btnAjax">Ajax载入</button>

</body>
</html>
<script>
    $(document).ready( function () {

        $('#btnLoad').click( function () {
            $('#content').load('/content/ p',function () {
                alert('载入成功');
            });
        });

        $('#btnGet').click( function () {
            $.get('/content/',null,function (response) {
                $('#content').html(response);
            });
        });

        $('#btnAjax').click( function () {
            $.ajax({
                url:'/content/',
                method:'Get',
                data:null,
                success: function (response) {
                    $('#content').html(response);
                }
            });
        });
    });
</script>
5-http 常见的状态码有哪些？

  • 200("OK")
    一切正常。实体主体中的文档（若存在的话）是某资源的表示。

  • 400("Bad Request")
    客户端方面的问题。实体主题中的文档（若存在的话）是一个错误消息。希望客户端能够理解此错误消息，并改正问题。

  • 500("Internal Server Error")
    服务期方面的问题。实体主体中的文档（如果存在的话）是一个错误消息。该错误消息通常无济于事，因为客户端无法修复服务器方面的问题。

  • 301("Moved Permanently")
    当客户端触发的动作引起了资源URI的变化时发送此响应代码。另外，当客户端向一个资源的旧URI发送请求时，也发送此响应代码。

  • 404("Not Found") 和410("Gone")
    当客户端所请求的URI不对应于任何资源时，发送此响应代码。404用于服务器端不知道客户端要请求哪个资源的情况；410用于服务器端知道客户端所请求的资源曾经存在，但现在已经不存在了的情况。

  • 409("Conflict")
    当客户端试图执行一个”会导致一个或多个资源处于不一致状态“的操作时，发送此响应代码。

posted @ 2021-02-28 22:53  何大勇  阅读(95)  评论(0)    收藏  举报