美文网首页菜鸟前端工程师大前端-BFE
JavaScript学习笔记028-ajax0get0post0

JavaScript学习笔记028-ajax0get0post0

作者: Mr柳上原 | 来源:发表于2018-10-06 13:10 被阅读0次

    Author:Mr.柳上原

    • 付出不亚于任何的努力
    • 愿我们所有的努力,都不会被生活辜负
    • 不忘初心,方得始终

    面试的时候问了点简单的es6知识

    然后跟我说公司开发用的是react

    回家啃了几天的react

    正式上班的时候

    用的是react-native

    对于只学了vue和小程序框架的我来说

    这种大起大落的感觉真是超级刺激

    不知道自己能不能够在公司站稳脚跟

    函数式编程和面向对象编程

    不同的两个模式

    挑战一下自己吧

    <!DOCTYPE html> <!-- 文档类型:标准html文档 -->
    
    <html lang='en'> <!-- html根标签 翻译文字:英文 -->
    
    <head> <!-- 网页头部 -->
    
    <meat charset='UTF-8'/> <!-- 网页字符编码 -->
    
    <meat name='Keywords' content='关键词1,关键词2'/>
    
    <meat name='Description' content='网站说明'/>
    
    <meat name='Author' content='作者'/>
    
    <title>前端59期学员作业</title> <!-- 网页标题 -->
    
    <link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
    
    <style type='text/css'> /*内部样式表*/
    
    </style>
    
    </head>
    
    <body> <!-- 网页主干:可视化区域 -->
    
    <script>
    /*
    ajax:
    与后台进行数据交互
    异步的JavaScript 和 XML
    ajax通过http协议请求数据
    无刷新页面进行数据加载
    
    http1.0三种请求方法:
    GET
    POST
    HEAD
    http1.1:
    DELETE
    PUT
    与后台交互时,约定俗成的请求规范
    增 POST
    删 DELETE
    改 PUT
    查 GET
    
    xhr.readyState状态码:
    0 请求未初始化
    1 连接到服务器
    2 请求以被接收到
    3 正在处理请求
    4 请求处理完成,并响应
    xhr.status(服务器)http状态码:
    100~ 消息
    200~ 成功
    300~ 重定向
    400~ 请求错误
    500~ 服务器错误
    */
    // 生成ajax对象
    const xhr = new XMLHttpRequest();
    // 通过open方法,设置跟后台交互的一些行为
    xhr.open("GET", "http://www.xxx.cn", true); // 第一个参数为请求方式,第二个参数是url地址,第三个参数是布尔值,设置是否使用异步请求
    // 按照上面设置好的方式发送数据
    xhr.send();
    // 监听数据发送,结束行为
    xhr.onload = () => {
    // 判断自身状态码,4代表成功
    if (xhr.readyState === 4){ // xhr.readyState是xhr自身的状态码
    // 判断http状态码,2开头的和304代表成功
    if (200 <= xhr.status && xhr.status < 300 || xhr.status === 304) {
    // 请求成功,拿到后台发来的数据
    xhr.responseText;
    }
    }
    }
    // 两种方法类似,onload监听数据发送,onreadystatechange监听数据发送状态发生变化的过程
    // xhr.onreadystatechange = () => {}
    
    /*
    get:
    get方式的数据发送
    查询字符串以键值对的方式,在get请求中的url地址中发送
    以?开头,键与值之间=连接,不同键值对之间&连接
    输入url地址后,浏览器默认get方式发送请求
    */
    // 中文会被转换成URI编码
    encodeURI("风屿"); // 中文转URI
    decodeURI(""); // URI转中文
    // get发送数据
    user: "fengyu",
    password: 123
    xhr.open("GET", "http://www.xxx.cn?user=fengyu&password=123", true);
    
    /*
    post:
    post方式的数据发送
    post发送数据必须设置请求头信息,数据作为send的参数发送
    */
    // post发送数据
    xhr.open("POST", "http://www.xxx.cn?user=fengyu&password=123", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // post请求头
    xhr.send("user=fengyu&password=123");
    
    /*
    跨域:
    默认不能进行跨域请求
    请求会被浏览器阻止
    
    域:
    环境
    不同的url地址是不同的域
    相同地址下不同的端口是不同的域
    实现跨域:
    JSONP  通过script的src
    CORS  在后台程序里设置对应的域进行访问
    代理  通过信任的服务器进行代理请求
    */
    
    </script>
    
    </body>
    
    </html>
    

    相关文章

      网友评论

      • 宋院林:标签<meat />写错了,应该为<meta />

      本文标题:JavaScript学习笔记028-ajax0get0post0

      本文链接:https://www.haomeiwen.com/subject/gjhhaftx.html