Ajax
点击按钮获取同级目录的 txt 文件内容
- oBtn.onclick = function() {//5 步走
- // 打开浏览器
- // 方法一
- var xhr = null;
- if(window.XMLHttpRequest) {
- // 如果是 IE7 以上用这个
- xhr = new XMLHttpRequest();
- } else {
- //IE6 以下用这个
- xhr = new ActiveXObject('Microsoft.XMLHTTP');
- }
- /*// 方法二
- var xhr = null;
- try {
- // 如果是 IE7 以上用这个
- xhr = new XMLHttpRequest();
- } catch (e) {
- //IE6 以下用这个
- xhr = new ActiveXObject('Microsoft.XMLHTTP');
- }
- */
- // 在地址栏输入地址
- xhr.open('get','1.txt',true);
- // 回车提交
- xhr.send();
- // 等待服务器返回页面
- xhr.onreadystatechange = function() {
- // 返回成功
- if(xhr.readyState == 4) {
- alert(xhr.responseText);
- }
- }
- }
做传递时前后端的传递方式, 传递名要对应, 这和收快递的道理是一样的;
异步与同步
异步: 非阻塞, 前面代码不会影响后面代码的执行;
同步: 阻塞, 前面代码会影响后面代码的执行.
产生的问题
Ajax get 请求产生缓存怎么办?
在 open() 函数里面的第二个参数, 即地址. 后面加上一个随机数, 例如时间戳:
+new Data().getTime()
. 就可以在每次发送请求时产生不同的地址, 这样缓存就没用了;
注意! 一定要在原字符串里面最后面加一个'&'.
post 方式没有缓存问题!
使用 get 向后端发送中文字符串会乱码, 怎么办?
比如向后端发送
username = 刘伟 & age = 30&
.
可以酱紫:
username = '+encodeURI('刘伟')+'&age = 30&
post 方式没有中文乱码问题!
当使用 post 方式时, 直接使用
xhr.send('username = leo&age = 30');
会发生错误.
这个时候, 我们要在 send() 之前先定义请求头. like this:
- xhr.open("POST","ajax_test.asp",true);
- xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
- xhr.send("username = leo&age = 30");
- JSON
IE7 以下就不支持了, 需要去 json.org 下载对应语言的 js 文件导入到你的 html 文件中.
json 中的 key 必须用双引号, 单引号都不行.
front end
来源: https://www.cnblogs.com/endymion/p/9229575.html