ajax第一课
请求并显示静态txt文件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>diyici</title> <script src="ajax.js"></script> <script> window.onload=function (){ var oBtn=document.getElementById('btn1'); oBtn.onclick=function (){ ajax('aaa.txt',function (str){ alert(str); },function (){ alert('失败'); }) } } </script> </head> <body> <input id="btn1" type="button" value="读取"/> </body> </html>
ajax 从服务器上读文件 并且返回回来能够进行处理 第一个参数是要读取的文件名 绝对(相对)路径都可以'aaa.txt' 第二个参数是当ajax成功读取信息后会执行的回调函数fnSucc(str) 返回内容 网址(路径)是http://localhost:8086/readtext.html 第三个是当失败时的函数 https://www.baidu.com/s?wd=%E6%9xxxxxx 百度的域名后跟了？还有其他一大堆 这些是get数据 http://localhost:8086/readtext.html?a=12 在域名上加上这些数据也是没有影响的 缓存 只有第一次打开网页时是请求 之后就是从本地缓存进去的 在硬盘上读取东西就比较快拉 去掉网页缓存的方法 在文件名后加一个缓存的t 后台不会接受这个t就仅仅只是给浏览器看的 让ul每次都不一样 从而清除了缓存 'aaa.txt?t='+new Date().getTime()
放到服务器下的文件就不能在用中文来命名了
执行时路径必须以localhost开头
"request-url too large" 网址也是有长度限制的
HTTP请求方式
form表单 method 表单的提交方式 必需的 action 属性规定当提交表单时，向何处发送表单数据。
<form action="https://www.nowcoder.com/" method="get" > 用户名:<input type="text" name="username" /><br> 密码:<input type="password" name="password" /><br> <input type="submit"> </form>
get方式：放入url跟着网址一起传递 名字=值&名字=值。。。。
eg：https://www.nowcoder.com/?username=2017307210630&password=swqw
容量小 安全性非常差 有缓存
post方式 数据并没有提交到网址后面 不通过网址传递 容量大 安全性好一点 无缓存
GET：用于获取数据 POST：用于上传数据
创建Ajax
1.创建一个ajax对象
2.连接到服务器
3.告诉服务器要哪些文件 发送请求
4.接受返回值
//兼容性
//创建Ajax对象:
var oAjax=new XMLHttpRequest(); var oAjax=ActiveObject("Microsoft.XMLHTTP"); （IE6） if(window.XMLHttpRequest){ var oAjax=new XMLHttpPequest(); } else{ var oAjax=new ActiveXObject("Micorsoft.XMLHTTP"); }
全局变量 其实是window上的一个属性
<script>var a=12; window.alert(window.a); </script>
假设我没有定义a 直接alert(a) 和 alert(window.a) 前者报错 后者弹出undefined
在js用没有定义的变量 报错 用没有定义的属性 undefined
2.连接服务器
oAjax.open(连接的方法，要连接的文件名，异步传输) oAjax.open('GET','a.txt',true);
同步传输：一件一件来
异步传输：多件事一起
3.发送请求
oAjax.send();
4.接受返回值
oAjax.onreadystatechage=function (){ //此函数 跟服务器有交互时发生的事件
// oAjax.readyState 告知浏览器和服务器进行到哪一部了 4代表整个交互过程已经完成
if(oAjax.readyState==4{
}
readyState
0：(未初始化)还没有调用open()方法
1：(载入)已调用send()方法，正在发送请求↓
2：(载入完成) send()方法完成，已收到全部响应内容
3：(解析)正在解析响应内容
4：(完成)响应内容解析完成，可以在客户端调用了；
function ajax(url,fnSucc,fnFaild){//url:要读的文件 fnSucc成功时执行的函数 //1.创建 if(window.XMLHttpRequest){ var oAjax=new XMLHttpPequest(); } else{ var oAjax=new ActiveXObject("Micorsoft.XMLHTTP"); } //2.连接服务器 oAjax.open('GET',url,true); //3.发送请求 oAjax.send(); //4.接收返回 oAjax.onreadystatechage=function (){ if(oAjax.readyState==4){ if(oAjax.status==200){//200成功 // alert('成功'+oAjax.responseText);//从服务器发送回来的文本 fnSucc(oAjax.responseText); } else{ // alert("失败"+oAjax.status);//失败 原因404 if(fnFaild){//并不是所有失败的情况都要管传进来的才管 fnFaild(oAjax.status); //判断以何种原因失败 } } } } }
面向对象：是一种通用思想 任何事情都可以用
面向对象编程oop特点
1.抽象：
2.封装：
3.继承：
对象的组成：方法（函数 ）属性（变量）
var arr=[1,2,3,4,5,6];
arr.a=12;
alert(arr.a);//12
任何对象都可以加自定义属性 像之前的aDiv[i].index=i; 现在a也是个自定义属性
var a=12;
alert('a');//12 于此对象和变量效果一样
this：当前发生事件的对象 当前的方法(函数)属于谁
不能在系统对象(data,array,regexp等等)中随意附加方法，属性，否则会覆盖已有方法，属性
object：空白的对象 几乎没有功能 可以往它身上加属性
工厂方式：原料 加工 出厂
<script> function createPerson(name,qq){ //原料 var obj=new Object(); //加工 obj.name=name; obj.qq=qq; //name qq就是自定义的属性(变量) obj.showName=function (){ //showname就是自定义的方法(函数) alert("我的名字是:"+this.name); }; obj.showQQ=function (){ alert('我的qq号:'+this.qq); } //出厂 return obj; } </script>
工厂方式小问题：
没有new方式去创建新变量 (var oDate=new Date() ; var arr=new Array())
函数重复定义
1.new方式：
function createPerson(name,qq){
//系统偷偷替我们创建一个空白对象 var this=new Object(); this.name=name; this.qq=qq; this.showName=function (){ alert("我的名字是:"+this.name); }; this.showQQ=function (){ alert('我的qq号:'+this.qq); } //也会偷偷做 return this; 所以无需这两步并且把obj全换成了this } var obj=new createPerson('blue','131231'); var obj2=new createPerson('张三','2423235');
obj.showName();
obj2.showQQ();
任何函数前面都能加new
function show(){
alert(this);
}
show(); //弹的是window
new show(); //object
2. 函数重复定义
原型：prototype
原型： js
css 一次给一组元素加样式 原型
行间样式 一次给一个元素加样式 给对象加东西
原型用到面向对象里来
<script> //用混合方式构造函数 (混合的构造函数/原型方式) function CreatePerson(name,qq){ //在构造函数里加属性 this.name=name; this.qq=qq; } //在原型里放重复的方法 CreatePerson.prototype.showName=function (){ alert("我的名字是:"+this.name); } CreatePerson.prototype.showQQ=function (){ alert("我的名字是:"+this.qq); }
var obj=new CreatePerson('blue','131231'); var obj2=new CreatePerson('张三','2423235');
obj.showName(); obj.showQQ(); obj2.showName(); obj2.showQQ(); alert(obj.showName==obj2.showName) //true </script>
Array.prototype.sum=function (){}//我可以给系统的类(Array)添加方法(即函数sum)
当然给可以给自己的类添加方法
类 对象
类： 模子（当然不具备实际功能）
对象： 产品(成品)
var arr=new Array(1,2,3,3);
Array:类
arr:模子
Array.push() X
arr.push() √
new arr() X 是个成品 无法再当成模子去生成别的东西
new Array() √
(第27课 我知道很怪异)
数组做函数形参就是数组名啊
var arr1=new Array(12,33,1);
