js补充部分知识

最新推荐文章于 2024-01-22 16:21:09 发布

Et2nity

最新推荐文章于 2024-01-22 16:21:09 发布

阅读量146

点赞数

分类专栏： JS/JavaScript 文章标签： ajax js javascript html5 css

本文链接：https://blog.csdn.net/Eternity_matt/article/details/109164770

版权

JS/JavaScript 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

一、函数的原型

（1）. 概念

1.每个函数都有一个prototype（原型）属性，它是个对象，这个对象的用途是包含所有的实例共享的属性和方法

2.每个prototype 对象都有一个 constructor 属性，这个属性指向构造函数

3.每个实例对象都有一个 __proto__ 属性，它指向protptype

（2）. 真实应用函数

构造函数继承：preson.apply(this,arguments)

在子构造函数里面使用call或apply方法调用父调用函数，把子构造函数里面的this和参数传递给父构造函数：

原型链继承：sonfn.prototype=new fafn()

把父构造函数的实例赋值给子构造函数的原型

  function Penson(params) {
            this.name = pName;
            this.age = pAge;
            this.country = '中国'
            this.intro = function () {
                console.log('我是' + this.name);
            }
        }
        njPerson.protptype.intro = function () {
            this.city = '南京'
        }
        //子函数调用父函数
        function njPerson() {
            this.city = '南京';
            Person.apply(this, arguments)
        }
        
        let nj1 = new njPerson('猪八戒', 18)
        na1.intro()
        njPerson,protptype 

        function szPerson(pName, pAge) { 
            this.name = pName;   
            this.city = '苏州';  
            this.intro = function () {  
                console.log('我是' + this.name); 
            } 
        } 
      
        let sz1 = new njPerson('唐僧', 28)
        sz1.intro()


        njperson.prototype = new person()

        // let nj1 = new njPerson('猪八戒', 18)

        console.log(naj1.country);

（3）. js对象分为哪几类

内置对象（字符串，数组，正则表达式，Math,）

自定义对象

宿主对象（浏览器对象window,document）

（4）. 构造函数、原型prototype、constructor、proto之间的关系示意图

二. 初学Ajax

（1）. 创建Ajax对象

let xhr = new XMLHttpRequest()

（2）. 连接服务器：请求方法（get,post）,请求地址，异步（true）或同步（false）

  xhr.open('get', 'test.txt', true)

（3）. 发送请求

 xhr.send();

（4）. 监控Ajax

 xhr.onreadystatechange = function () {
            //  请求状态码， 数据响应已就绪
            if (xhr.readyState == 4) {
                // 请求找到页面   200 =‘ok’ 404="未找到"
                //   状态码 ：数据已经成功到达客户端
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                }
            }
        }

准备的五个状态：

 /*
                4 一般指接收到响应数据的状态：

                0：未初始化。new完后;
                1：已打开。对象已经创建并初始化，但还未调用send方法
                2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
                3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
                4：已加载。所有数据接收完毕
                */

Http状态码状态：

HTTP 400 – 请求无效
HTTP 403 – 禁止访问
HTTP 404- 无法找到文件
HTTP 500 – 内部服务器错误
HTTP 502 – 网关错误
Error 501 – 未实现
HTTP 200 – 确定。客户端请求已成功。
HTTP 302 – 对象已移动。
HTTP 401 – 访问被拒绝。

成熟Ajax已经配置完成了，通过这四步来形成一个完整的ajax，接下来是Ajax的应用

（5）. Ajax应用于储存信息1

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        tr,
        td {
            border: 1px solid #333;
        }

        table {
            border-collapse: collapse;




        }
    </style>
</head>

<body>
    <table>
        <tr>
            <thead>
                <td>姓名</td>
                <td>年龄</td>
                <td>地址</td>
            </thead>
            <tbody>
                <td>张三</td>
                <td>20</td>
                <td>北京</td>
            </tbody>
        </tr>
    </table>


    <script>
        let xhr = new XMLHttpRequest()
        xhr.open('get', 'https://www.fastmock.site/mock/0dba195426a2c11b1775554e66634649/test/test', true)
        xhr.send()

        xhr.onreadystatechange = function () {
            let newtable = document.querySelector('table')
            if (xhr.readyState === 4) {
                    /*
                    4 一般指接收到响应数据的状态：
                    0：未初始化。new完后;
                    1：已打开。对象已经创建并初始化，但还未调用send方法
                    2：已发送。已经调用send 方法，但该对象正在等待状态码和头的返回；
                    3：正在接收。已经接收了部分数据，但还不能使用该对象的属性和方法，因为状态和响应头不完整；
                    4：已加载。所有数据接收完毕
                    */
                if (xhr.status === 200) {
                    let mydata = JSON.parse(xhr.responseText)
                    console.log(mydata);
                    for (let i = 0; i < mydata.length; i++) {


                        let newtr = document.createElement('tr')

                        let newtd1 = document.createElement('td')
                        newtd1.innerHTML = mydata[i].name

                        let newtd2 = document.createElement('td')
                        newtd2.innerHTML = mydata[i].age

                        let newtd3 = document.createElement('td')
                        newtd3.innerHTML = mydata[i].address

                        newtr.appendChild(newtd1)
                        newtr.appendChild(newtd2)
                        newtr.appendChild(newtd3)
                        newtable.appendChild(newtr)
                    }
                }
            }
        }
    </script>
</body>

</html>

Et2nity

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js补充部分知识

一、函数的原型（1）. 概念1.每个函数都有一个prototype（原型）属性，它是个对象，这个对象的用途是包含所有的实例共享的属性和方法2.每个prototype对象都有一个constructor属性，这个属性指向构造函数3.每个实例对象都有一个__proto__属性，它指向protptype（2）. 真实应用函数构造函数继承：preson.apply(this,arguments)在子构造函数里面使用call或apply方法调用父调用函数，把子构造...
复制链接

扫一扫