笔记目录
- 《智能社：JavaScript教程——从入门到精通》第1~5集笔记 事件
- 《智能社：JavaScript教程——从入门到精通》第6~10集笔记
- 《智能社：JavaScript教程——从入门到精通》第11~14集笔记 DOM操作和表格
- 《智能社：JavaScript教程——从入门到精通》第15~19集笔记 运动
- 《智能社：JavaScript教程——从入门到精通》第20~21集笔记 鼠标键盘事件
- 《智能社：JavaScript教程——从入门到精通》第22~23集笔记 事件高级应用
- 《智能社：JavaScript教程——从入门到精通》第24~25集笔记 Ajax
- 《智能社：JavaScript教程——从入门到精通》第26~29集笔记 面向对象
- 《智能社：JavaScript教程——从入门到精通》第30~31集笔记 坐标和cookie
- 《智能社：JavaScript教程——从入门到精通》第32集笔记 JS正则表达式
- 本文为原创，转载请注明：https://blog.xinpapa.com/2017/12/16/zhinengshe24-25/
详细内容
1.Ajax基础
HTTP请求方法- 请求
js（或json）文件eval的使用- DOM创建元素
GET、POST的区别get：通过url传递数据，容量小，安全性差，有缓存post：不通过网址传递数据，容量大（2G），安全性好一点，没有缓存
- 请求
2.编写Ajax1
- 创建
Ajax对象ActiveXObject("Microsoft.XMLHTTP")XMLHttpRequest()
- 连接服务器
open(方法,文件名,异步传输)- 同步和异步：同步是事情一件一件来，异步是多个事情一起做；
Ajax一般使用是异步；
- 同步和异步：同步是事情一件一件来，异步是多个事情一起做；
- 发送请求
send()
3.编写Ajax2
- 请求状态监控
onreadystatechange事件readyState属性：请求状态- 0 (未初始化)还没有调用
open()方法 - 1 (载入)已调用
send()方法，正在发送请求 - 2 (载入完成)
send()方法完成，已收到全部相应内容 - 3 (解析)正在解析响应内容
- 4 (完成)响应内容解析完成，可以在客户端调用了
- 0 (未初始化)还没有调用
status属性：请求结果responseTest
- 代码如下：
<body> <input id="btn1" type="button" value="读取" /> </body>window.onload = function () { var oBtn = document.getElementById("btn1"); oBtn.onclick = function () { ajax("a.txt", function (text) { alert(text); }); }; }; //封装后的ajax方法(get请求) function ajax(url, fnSuccess, fnFaild) { //1.创建Ajax对象 if (window.XMLHttpRequest) {//如果有XMLHttpRequest则执行 var oAjax = new XMLHttpRequest();//IE6不兼容 } else { //只有IE6兼容 var oAjax = new ActiveXObject("Microsoft.XMLHTTP"); } //2.连接服务器 oAjax.open("GET", url, true); //3.发送请求 oAjax.send(); //4.接收返回的数据 oAjax.onreadystatechange = function () { //oAjax.readyState用来得到浏览器和服务器，进行到哪一步了 if (oAjax.readyState == 4) {//读取完成 if (oAjax.status == 200) {//代表成功，如果失败status是404 fnSuccess(oAjax.responseText); } else { if (fnFaild) { fnFaild(oAjax.status); } } } }; };