BOM&Ajax

最新推荐文章于 2024-08-12 09:24:46 发布
最新推荐文章于 2024-08-12 09:24:46 发布
阅读量249 收藏
点赞数
分类专栏： Javascript 文章标签： ajax javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_52142992/article/details/128026427
版权
(1). window对象
1.window对象

​ window对象表示浏览器中打开的窗口.如果文档包含框架( 或 标签),浏览器会为HTML文档创建一个window对象,并为每个框架创建一个额外的window对象.

2.window方法

  • JSON 数据格式

    json数据是一种轻量级的数据格式,非常方便在互联网上传输,它的格式如下:

    一般是对象或者数组,服务器端返回给前端的一般就是这种数据格式,以键值对存储,键名必须是双引号,值如果是字符串也必须是双引号,最后一个键值对不能加逗号(普通对象可以加)

[
    {
        "username":"zhansan",
        "age":18
    },
    {
        "username":"zhansna",
        "age":19
    },
    {
        "username":"lisi",
        "age":20
    }
]
  • 对象和JSON之间的转换: 对象=>json: JSON.stringify(), json=>对象: JSON.parse()
var obj = {username: "zhangsan",age: 10};
//对象转json字符串
var obj = JSON.stringify(obj);
console.log(obj);

//json字符串转对象
var str2 = '{"username":"张三","age":"20"}';
str = JSON.parse(str2);
console.log(str2);
  • Open() 新打开一个浏览器窗口或查询一个已命名的窗口
<!-- html: 打开这个html文件的时候会自动跳转到百度页面 -->
<body>
    <script src="example.js"></script>
</body>

//example.js
window.open('http://www.baidu.com');
  • setTimeout(),clearTimeout() 延迟,清除延迟
  • setInterval(),clearInterval() 定时器,清除定时器(可用于在规定的时间后执行或调用函数)
//延迟执行
var timeout = setTime(function(){
    console.log('you');
},2000);
//清除延迟
clearTime(timeout);

//定时器:写一个60秒的倒计时
var count = 60;
var timer = setInterval(function(){
    console.log(count--);
    if(count == 0){
        //清除定时器
        clearInterval(timer);
    }
},3000)
  • eval() 计算函数(可用于JavaScript字符串的计算)
eval("20+11");	//也可以是变量
  • parseInt(),parseFloat() 解析函数,可以返回一个整数或浮点数(小数或整数)
parseInt('10');	//10
parseFloat('10');	//10
parseFloat('23.1');	//23.1
  • encodeURI(),decodeURI() 编码和编码
var url = 'http://www.baidu.com?username=张三&age=1 8';
// 将url编码
url = encodeURI(url);
console.log(url);	//http://www.baidu.com?username=%E5%BC%A0%E4%B8%89&age=1%208

// 解码 
url = decodeURI(url);
console.log(url);	//http://www.baidu.com?username=张三&age=1 8
3.浏览器缓存

​ 浏览器的本地缓存: cookie, sessionStorage, localStorage

​ 三者区别:

​ 相同点: 都是放在客户端(浏览器端),都是浏览器缓存

​ 不同点:

​ cookie数据始终在同源的http请求中携带,在浏览器和服务器来回传递,而sessionStorage和localStorage仅在本地(浏览器)保存;

​ 大小限制区别,cookie数据不超过4kb,sessionStorage和localStorage最大为5M,她们俩是html5的特性;

​ 数据有效期不同,cookie在设置的(服务器设置)有效期内有效;,sessionStorage仅在当前浏览器窗口关闭前有效,关闭即销毁(临时存储),localStorage始终有效,用于持久化本地存储,除非主动删除数据,否则不会过期.

<body>
    <p>sessionStorage</p>
    <button onclick="save()">存数据</button>
    <button onclick="get()">取数据</button>
    <button onclick="clearData()">清除数据</button>
    <button onclick="clearAllDate()">清除全部数据</button>

    <h3>
        <p>存取对象</p>
        <button onclick="save3()">存数据</button>
        <button onclick="get3()">取数据</button> 
    </h3>
    <p>localStorage</p>
    <button onclick="save2()">存数据</button>
    <button onclick="get2()">取数据</button>
    <button onclick="clearData2()">清除数据</button>
    <button onclick="clearAllDate2()">清除全部数据</button>

  <script>
    // sessionStorage存数据
    function save(){
        sessionStorage.setItem('username','张三');
        sessionStorage.setItem('username2','李四');
        //查看浏览器缓存：控制台输入sessionstorage,查看控制台的应用
    }


    // sessionStorage取数据
    function get(){
        var username = sessionStorage.getItem('username');
        var username2 = sessionStorage.getItem('username2');
        console.log(username);
        console.log(username2);
    }
   
    // 清除
    function clearData(){
        sessionStorage.removeItem('username');
    }
    
    // 全部清除
    function clearAllDate(){
        sessionStorage.clear();
    }


    // localStorage存数据
    function save2(){
        localStorage.setItem('username3','wangwu');
        localStorage.setItem('username4','zhaoliu');
        
    }

    // localStorage取数据
    function get2(){
        var username3 = localStorage.getItem('username3');
        var username4 = localStorage.getItem('username4');
        console.log(username3);
        console.log(username4);
    }

    // 清除
    function clearData2(){
        localStorage.removeItem('username3');
    }
    
    // 全部清除
    function clearAllDate2(){
        localStorage.clear();
    }

    //存取对象
    function save3(){
        var obj = {
            name:'张三',
            age:18
        }
        //存对象时，先把对象转成json字符串
        obj = JSON.stringify(obj);
        localStorage.setItem('obj',obj);
    }

    function get3(){
        //取json时，先把json转成对象
        var str = localStorage.getItem('obj');
        var obj = JSON.parse(str);
        console.log(obj);
    }

  </script>
</body>

总结:

​ 存数据setItem(‘名称’,值);

​ 取数据getItem(‘名称’);

​ 移除数据removeItem(‘名称’);

​ 全部清除clear();

注意: 数据存入缓存都变成了字符串,需要存对象的时候,需要先将对象转成json字符串,取出时再把json字符串转成对象.

(2). BOM
1.BOM

​ 浏览器对象模型(Browser Object Model)简称BOM,浏览器对象模型BOM使JavaScript有能力与浏览器’对话’.

2. BOM对象
  • location 包含当前网页文档的URI信息
// 获取浏览器地址
var url = location.href;
console.log(url);

// 跳转到百度
// location.href = 'http://www.baidu.com';

// 跳转到百度带参数
location.href = 'http://www.baidu.com?a=2&b=3&c=4';

// 获取参数字符串(?后面的一串数字)
var search = location.search;
console.log(search);

// hash #号后面的字符串
console.log(location.hash);//
// host 域名
console.log(location.host);//www.baidu.com


// 把参数字符串转为对象
function getParam(name){
    var search = location.search;
    console.log(obj);

    // 去掉?号
    var search = search.slice(1);
    console.log(search);

    // 以&作为分割符, 把字符串变成数组
    var arr = search.split('&');
    console.log(arr);

    // 声明对象, 用来存放参数
    var obj = {};
    arr.forEach(function(item){
        // 以等于号进行分割
        var paramArr = item.split('=');
        console.log(paramArr);
        obj[paramArr[0]] = paramArr[1];
    });
    console.log(obj);
    return obj[name];
}
getParam('a');

  • history 包含浏览器窗口访问过的URI信息

    history.back() 后退

    history.forward() 前进

    history.go() go(1)前进一个记录,go(-1)后退一个记录

  <body>
      <button onclick="goBack">后退</button>
      <button onclick="forward">前进</button>
      <button onclick="goAndBack">前进或后退</button>
      
      <script>
          function goBack(){
              window.history.back();
          }
          function forward(){
              window.history.forward();
          }
          function goAndBack(){
              window.history.go(1);
              window.history.go(-1);
          }
      </script>
  </body>
  • navigator 包含客户端有关浏览器信息,主要用于navigator.userAgent,用来判断用户使用的浏览器类型
<body>
     <button onclick="goto()">判断用户使用的设备</button>
     
     <script>
        function goto(){
            var userAgent = navigator.userAgent;
            //判断用户使用的设备，需要手机所有的移动设备
            if(userAgent.match(/Android|iPhone|iPad/)){
                location.href = 'https://m.maoyan.com/#movie';
            }else{
                location.href = 'https://m.maoyan.com/#movie';
            }
        }
    </script>
</body>
(3). Ajax
1. ajax

​ AJAX = Asynchronous JavaScript and XML(异步的JavaScript和XML).

​ ajax最大的优点就是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.

2.ajax创建过程
  • 创建异步ajax请求对象
  • 设置请求方法和请求参数
  • 发送请求
  • 注册(绑定)事件
  • 获取返回数据
3.get请求和post区别

  • 用途

    get一般用于获取数据:数据先存在服务器,通过get请求去获取

    post一般用于发送数据: 比如用户注册,用户填好表单后,通过post把数据传给服务器,服务器再将数据存入数据库.

  • 传递参数

    get请求如果需要传递参数,那么会默认将参数拼接在url后面,然后发送给服务器;get请求传递参数大小是有限的的,是浏览器的地址栏有大小限制;

    post传递参数,需要把参数放进请求体中,发送给服务器;post请求参数放进了请求体中,对大小没有要求.

  • 安全性问题

    get安全性相对比较低,post安全性比较高.

  • 浏览器缓存

    get一般会走缓存,为了防止走缓存,给url后面每次拼接的参数都不同,放在?后面,一般用个时间戳.

    post请求不会走缓存.

  • get请求

//创建对象
var xhr = new XMLHttpRequest();
//设置请求参数(请求方式get/post,请求地址):此处写请求数据接口的地址?拼接参数&..&..
xhr.open('GET','http://localhost:3000/user/list?currPage=1&type='01'');
//发送请求
xhr.send();
//注册事件,获取返回数据
xhr.onreadystatechange = function(){
    //请求的状态
    console.log(xhr.readyState);
    //状态码
    console.log(xhr.status);
    //ajax为json字符串,转对象
    if(xhr.readyState === 4&&xhr.responseText === 200){
        var res = JSON.parse(xhr.responseText);
        console.log(res);
        res.list.forEach(item=>{
            //获取用户详情
            console.log(item);
        })
    }
}
  • post请求
//创建对象
var xhr = new XMLHttpResquest();
//设置请求对象:此处写接收数据的接口地址
xhr.open('POST','http://localhost:3000/user/list');
//设置请求头: Content-Type用来设置传递给服务器的数据格式
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
//发送请求:拼接的参数写在这
xhr.send('currPage=1&type='01'');
//绑定事件,获取返回事件
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4&&xhr.status === 200){
        var res = JSON.parse(xhr.responseText);
        cons.log(res);
    }
}
4.http状态码

  • 请求就绪状态(readyState)

    0: 请求未初始化,还没有调用open();

    1: 请求已经建立,但是还没有发送,还没有调用send();

    2: 请求已发送,正在处理中(通常现在可以从响应中获取内容头);

    3: 请求在处理中,通常相应中已有部分数据可用了,没有全部完成;

    4: 相应已完成,可以获取并使用服务器的响应.

  • http状态码(status)

    200: 请求成功,一般用于GET和POST请求.

    301: 永久移动,请求的资源已被永久的移动到新的URI,返回信息会包括新的URI,浏览器会自动定向到新URI,今后任何新的请求都应使用新的URI代替.

    302: 临时移动,与301类似,但资源只是临时被移动,客户端应继续使用原有URI,301和302都叫地址重定向,一个是永久重定向,一个是临时重定向.

    304: 未修改,所请求的资源未修改,服务器返回此状态码时,不会返回任何资源,客户端通常会缓存访问过的资源,通过提供一个头信息指出客户端希望只返回在指定日期之后修改的资源.

    403: 服务器理解请求客户端的请求,但是拒绝执行此请求.

    404: 服务器无法根据客户端的请求找到资源(网页),通过此代码,网站设计人员可设置"您所请求的资源无法找到"的个性页面.

    405: 客户端请求中的方法被禁止.

    500: 服务器内部错误,无法完成请求.

5.跨域请求

  • 跨域: 浏览器有同源策略,只有当"协议",“域名”,"端口号"都相同时,才能称之为是同源策略,其中有一个不同,即是跨域.

  • 同源策略的作用: 同源策略限制了从同一个原加载的文档或脚本如何与来自另一个源的资源进行交互,这是一个用于隔离潜在恶意文件的重要安全机制.

  • 跨域的原因: 一是前端和服务器分开部署,接口请求需要跨域,二是可能会加载其他网站的页面作为iframe内嵌.

  • 跨越的方法:

    jsonp和cors跨域(jsonp只能支持get请求,cors可以支持多种请求,cors是在服务器端设置);

    proxy代理跨域: nginx反向代理(运营或后台),webpack设置proxy跨域(前端)

    websocket跨域

    postMessage

    window.name + iframe,location.hash + iframe,document.domain

  • json跨域原理: 尽管浏览器有同源策略,但是

6.同步和异步

ajax默认是异步的,但它也可以设置成同步.

xhr.open('get','http://localhost:3000/user/list?currPage=1&type='01'',false);
//将open的第三个参数设置为false,则为同步,而默认是true(异步)
7.封装ajax请求的库
 <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.24.0/axios.min.js"></script>
<script>
    axios.get('http://localhost:3000/user/list',{params:{
        currPage: 2,
        type: '01'
    }}).then(function(res){
        cosole.log(res);
    }).catch(function(error){
        console.log(error);
    })
</script>
8.this指向
  • this永远指向函数运行时所在的对象,而不是函数被创建时所在的对象
  • 普通的函数调用: 函数被谁调用,this就是谁
  • 匿名函数或不处于任何对象中的函数指向window
  • 如果是call,apply,bind,this指向了这三者调用时传入的第一个参数
  • 箭头函数的指向: 由于箭头函数和不绑定this,它会捕获其所在上下文(作用域)的this值,作为自己的this值
9.封装函数
  • 封装请求函数
  • 封装参数字符串转换
var utils = {
  /**
   * @param {*} url 请求地址
   * @param {*} data 请求参数, 若无则传{}
   * @param {*} callback 回调函数
   */
    //封装ajax的get方法
   get(url,data,callback){
       var xhr = newXMLHttpresquest();
       //调用方法,获取请求参数字符串
       var paramStr = this.toParams(data);
       xhr.open('get',`${url}?${paramsStr}`);
       xhr.send();
       xhr.onreadystatechange = function(){
           if(xhr.readyState === 4&& xhr.status === 200){
               var res = JSON.parse(xhr.responseText);
               callback(res);
           }
       };
   },
    
    //封装ajjax的post方法
    post(url,data,callback){
        data = data || {};
        var xhr = new XMLHttpResquest();
        var paramStr = this.toParams(data);
        xhr.open('post',url);
        xhr.setResquestHeader('Content-Type', 'application/x-www-form-urlencoded');
        xhr.send(paramStr);
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4&&xhr.status === 200){
                var res = JSON.parse(xhr.responseText);
                callback(res);
            }
        };
    },
    //把对象变成字符串拼接形式
	toParams(data){
        var str = "";
        for(var key in data){
            str += `${key}=${data[key]}&`;
        }
        return str.slice(0,-1);
    },
};
咩Kakao
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
关于JavaScript BOM&DOM&Ajax
Aowu_Y_y的博客
08-31 384
JavaScript基础及其BOM 1.JavaScript简介 1.1.JavaScript是一种解释性脚本语言（代码不进行预编译），由浏览器解释执行，用来向页面添加交互行为； 1.2.Java Script由三个主要组成部分：ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象模型）； （1）核心（ECMAScript）：这一部分主要是js的基本语法。 （2）BOM：Brower Object Model（浏览器对象模型），主要是获取浏览器信息或操作浏览器的，例如：浏览器的前进与后退
Bom 和 Ajax
m0_57860459的博客
03-14 359
金山文档】 Bom和Ajax# https://kdocs.cn/l/cnWuvzdJqqOU 复习: 回调函数 (一) window对象# JavaScript运行在浏览器, 而window对象是浏览器提供的一个对象, 所以也可以称为宿主对象。window包含Dom和Bom和其它的一些全局对象和方法, EcmaScript则是运行在浏览器上, window为EcmaScript提供了全局作用域. (1) 浏览器缓存# 问题1: 浏览器本地缓存有哪些 问题2: cookie、sessionSt
789-792---BOM（定时器（setInterval() 定时器），案例 ：倒计时，停止setInterval() 定时器，案例：发送短信，this的指向）
weixin_51249285的博客
05-12 377
文章目录BOM3 定时器3.4 setInterval() 定时器案例：倒计时3.5 停止setInterval() 定时器案例：发送短信3.6 this BOM 3 定时器 3.4 setInterval() 定时器 window.setInterval(回调函数,[间隔的毫秒数]); setInterval0方法重复调用一个函数,每隔这个时间,就去调用一次回调函数。 注意:\color{red}{注意:}注意: window可以省略。 这个调用函数可以直接写函数,或者写函数名\color{red}{
Bom——定时器
zx2014567296的博客
07-22 372
定时器 定时器概念 setTimeout(调用函数/函数名，[延迟的毫秒数]) setTimeout又称为回调函数callback，上一件事干完再回头调用的意思，只调用一次 setInterval(回调函数，[间隔的毫秒数])。每隔设定的时间运行一次函数，会重复调用 案例 案例1：5秒关闭广告 效果：图片、文字过5秒后消失。 核心思想 设置定时器，当过了5秒后，被选中的事件源设置display = 'none' 。 由于该效果只使用一次，因此设置setTimeout。 代码 javascri
BOM：倒计时60秒之后重新发送短信的小练习
weixin_46682277的博客
03-31 200
<input type="text" name="" id=""><button class="btn">发送短信</button> <script> // 点击发送按钮后 该按钮60秒内不能再次点击 var btn = document.querySelector(".btn"); var index = 60; // 初始化倒计时秒数 // 点击btn后让该按钮disable=true禁用 // 同时修改文字为：60秒后重新发送短信 btn.ad
服务器输出的json带有bom头
一天到晚游泳的鱼
03-14 1950
前端网页的js中的ajax请求,跳入了error,查了原因是json解析出错,经过调试,发现了json数据开头有个空白字符 \ufeff 原因是后台的包含的config.php文件带有bom格式的了,用notepad++打开代码文件可以得知的.把代码转化为无bom的utf8格式就正常了....
js_BOM&Dom&Ajax
ZWJAS的博客
01-10 1414
一种语法代表了多重含义，在JavaScript中若想清楚的区分定义的到底是方法还是类性质的对象，那么建议方法名称小写，建议类或对象名称首字母大写一种语法代表了多重含义，在JavaScript中若想清楚的区分定义的到底是方法还是类性质的对象，那么建议方法名称小写，建议类或对象名称首字母大写functionPerson// 函数名大驼峰是一个对象，小驼峰是函数// 属性var;var;// 方法thisgetNamefunctionreturnthis;
json&ajax
Peng_zhj的博客
01-19 520
JSON概述 JavaScript对象表示形式（JavaScript Object Notation） * java对象表示形式 User user = new User(); user.setUsername("后羿"); user.setAge(23); String s=user.getUserName(); Integer i=user.getAge(); * javaScript对象表示形式 let user={"username"
BOM，Ajax，jQuery
m0_60502228的博客
09-15 113
BOM 浏览器对象模型，浏览器提供js操作浏览器的api 兼容性问题 js是单线程语言 1）超时调用 setTimeout() 参数：第一个参数是一个回调函数，第二个参数是一个时间（单位是毫秒） 返回值：id值 清除超时调用：clearTimeout(id) 2）间歇调用 setInterval() 参数：第一个参数是一个回调函数，第二个参数是一个时间（单位是毫秒） 返回值：id值 取消间歇调用：clearInt...
JavaWeb 04 BOM&DOM
03-31
同时，通过Ajax（异步JavaScript和XML）技术，开发者能使用BOM和DOM实现页面部分刷新，提升用户体验。 **学习资源** 为了深入理解和掌握JavaWeb中的BOM和DOM，你可以参考提供的资料和上课示例。PPT可能包含了关键...
h5、css、js、DOM、BOM、jQuery、Ajax
03-23
在IT行业中，前端开发是构建Web应用程序的关键部分，而`h5`、`css`、`js`、`DOM`、`BOM`、`jQuery`和`Ajax`是这个领域中的核心概念和技术。以下是对这些知识点的详细阐述： 1. **HTML5 (h5)** HTML5是超文本标记...
JavaScript基础&BOM，学习Java第42天
07-31
在实际使用中，JavaScript可以实现诸多功能，比如提升用户体验的页面效果、表单验证、事件监听和数据处理，以及无刷新页面跳转和局部刷新（如Ajax）。引入JavaScript有三种方式：行内样式JS（通常不推荐，因为影响...
javascript的BOM
10-22
BOM是浏览器的窗口对象，提供了很多窗口处理的API。在webapp框架越来越多的情况下，需要我们在同一窗口处理不同页面、不同的ajax数据，则需要我们熟悉BOM的内容。
php Ajax乱码
12-18
1. 确保PHP文件的编码设置为UTF-8无BOM。 2. 在PHP文件中设置`header()`，指定响应的字符集为UTF-8。 3. 使用`iconv()`函数进行编码转换，如果必要的话。 4. 在AJAX请求中设置`contentType`为UTF-8。 5. 服务器端...
前端（三）：Ajax
qq_52200849的博客
08-06 626
Asynchronous JavaScript And XML，简称Ajax，是异步的JavaScript和XML。，通过Ajax可以给服务器发送请求，并获取服务器响应的数据。：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想、用户名是否可用的校验等。
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 418
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
05_ Electron 自定义菜单、主进程与渲染进程通信
所学所思
08-09 582
单独写在一个 js 文件中，然后再在主进程中引入labe: "文件",submenu: [label: "新建文件",},label: "编辑",submenu: [label: "复制",},submenu: [// main.js// 1、引入初始化remote 模块width:800,})// __dirname 表示获取我们当前目录， path.join 会将两个参数合并成 d://electrondemo/index.html// 打开调试模式。
Electron学习与总结
最新发布
song854601134的博客
08-12 117
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
dom,bom,ajax
04-08
这是一个关于Web开发的问题，DOM（文档对象模型）是一种用于HTML和XML文档的编程接口，BOM（浏览器对象模型）是一组API，用于操作浏览器窗口和框架，而Ajax（异步JavaScript和XML）是一种用于创建快速动态网页的技术。您可以使用这些技术来创建交互性更强、更有响应性的Web应用程序。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值