JavaScript学习笔记028-ajax0get0post0跨域请求

Mr. 柳上原

发布于 2018-10-11 14:37:46

9690

发布于 2018-10-11 14:37:46

文章被收录于专栏：菜鸟前端工程师

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>

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2018.10.06 ，如有侵权请联系 cloudcommunity@tencent.com 删除

java