JavaScript學(xué)習(xí)筆記028-ajax0get0post0跨域請(qǐng)求
標(biāo)簽：
JavaScript
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. = () => {// 判断自身状态码，4代表成功if (xhr.readyState === 4){ // xhr.readyState是xhr自身的状态码// 判断http状态码，2开头的和304代表成功if (200 <= xhr.status && xhr.status < 300 || xhr.status === 304) {// 请求成功，拿到后台发来的数据xhr.responseText;
}
}
}// 两种方法类似，监听数据发送，onreadystatechange监听数据发送状态发生变化的过程// xhr.onreadystatechange = () => {}/*
get：
get方式的数据发送
查询字符串以键值对的方式，在get请求中的url地址中发送
以？开头，键与值之间=连接，不同键值对之间&连接
输入url地址后，浏览器默认get方式发送请求
*/// 中文会被转换成URI编码encodeURI("风屿"); // 中文转URIdecodeURI(""); // URI转中文// get发送数据user: "fengyu",password: 123xhr.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>
作者：Mr柳上原
链接：https://www.jianshu.com/p/7d3efdf6cee3
點(diǎn)擊查看更多內(nèi)容
為 TA 點(diǎn)贊
評(píng)論
評(píng)論
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持，我會(huì)繼續(xù)努力的～
掃碼打賞，你說多少就多少
贊賞金額會(huì)直接到老師賬戶
支付方式
打開微信掃一掃，即可進(jìn)行掃碼打賞哦