ajax相关笔记（一）
1.原来使用js来制作隔行变色及鼠标悬浮时的光棒效果，可以使用css3中的结构伪类选择器:nth-child(even)及:nth-child(odd)和状态伪类:hover来实现了。
2.表单的两种提交方式
◆get：是在url中传递数据（xxx.php?name=jack&age=18），但是有缺点，地址栏的url中能够看到你传递的数据、传递数据的大小有限制、并且不能上传文件。
◆post：url中看不到数据、可以上传文件、上传文件的大小没有限制，但是服务器端会对大小做限制，所以需要修改服务器端的配置文件，如php中php.ini文件。
3.ajax发送请求的两种方式
◆get方式：【
1.创建异步对象
var ajaxGet=newXMLHttpRequest();
2.设置url地址请求参数及请求方式
ajaxGet.open('get','get.php?name=jack&age=28',true);
3.发送请求
ajaxGet.send();
4.监听事件
ajaxGet.onreadystatechange=function(){
if(ajaxGet.readyState==4&&ajaxGet.status=200){
console.log(ajaxGet.responseText);//获取结果
}
}
5.在事件中获取结果
】
◆post方式：【
1.创建异步对象
var ajaxPost=new XMLHttpReuqest();
2.设置url地址及请求方式
ajaxPost.open('post','post.php',true);
//使用ajax发送post请求还需要设置请求头，在单独上传文件的时候不需要设置请求头
ajaxPost.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3.发送请求并设置参数
ajaxPost.send('name=jack&age=28');
4.监听事件
ajaxPost.onreadystatechange=function(){
if(ajaxPost.readyState==4&&ajaxPost.status=200){
console.log(ajaxPost.responseText);//获取结果
}
}
5.在事件中获取结果
】
3.实际开发中get、post的选取，后台程序员会通过文档或者口头的方式相告之，如果不考虑提交文件，其实get和post的作用基本一样，除了写法不同，自己写demo的时候可以自行选择使用get还是post。
4.css3中背景大小样式(background-size)加上背景的复合写法
◆background: url(1.png) no-repeat scroll center center/cover;
5.php文件中没有设置header函数的编码，但是如果你是把响应的内容传给了一个自己编码的文件，那么响应的内容就会以那个文件的编码格式进行解码。
6.php之所以被称为"最好的编程语言"，因为它十分方便，基本上所有的功能它都有封装成方法。
7.php读取文件的函数
◆file_get_contents("info/news/txt");
◆
◆
8.xml文件介绍
◆是按照某种既定的格式写的字符串
◆最开始要写版本号（可写可不写）
◆统统使用双标签
◆最外层 需要写一个根节点
◆标签的名字是可以随意写的
◇不要使用数字及特殊符号开头
◇不要使用中文
◆如果写了版本号，如<?xml version="1.0" encoding="UTF-8"?>，那么必须放在第一行，否则会报错。
◆如果使用php读取，然后输出，那么就需要设置header函数中的content-type原本的text/html改为 text/xml。
9.使用ajax获取xml
◆通过异步对象的事件获取数据的时候不再获取responseText，而是获取responseXML，返回的对象的一个xml文档对象，和html的文档对象一样可以使用操作dom的方式来操作这个文档对象，从而获取其中的dom元素达到获取数据的目的。
10.使用ajax获取json
◆xml在实际开发中使用的比较低，xml大，解析起来很麻烦，xml写起来也很麻烦。
◆json在实际开发中使用的比较高，json是一种格式的字符串，基本所有的语言都有将json字符串转化为该语言对象的语法。
◆json其实就是js中的对象的两种字面量中的一种表现形式，
◆json字符串，如果是对象就使用{}包裹起来，如果是数组就使用[]包裹起来，属性名必须使用双引号包裹，属性名跟属性值之间使用:隔开，属性值也必须使用双引号包裹（如果数据类型不是字符串可以不适用双引号），var jsonStr='{"name":"jack","age":20}';
◆如果要将对应的json字符串转化为对应的js对象，使用一个全部的变量JSON，使用它的JSON.parse()方法，var jsonStr='{"name":"jack","age":20}';，JSON.parse(jsonStr);//转化为js对象
◆ajax获取json对象的方式是，在ajax的事件中获取数据，然后使用JSON.parse将字符串转化为js对象，JSON.parse(ajax.responseText);。
11.封装 ajax的get与post请求方式的方法（额外加一个两种都有的方法）
◆get方法【
//思路：传递url地址 传递url参数 传递一个回调函数，保证监听的事件完毕后获取返回值，事件的本质就是方法，如果你在一个方法中使用renturn，那么并不会让最外面的方法能够获取到返回值的，所以你可以使用回调函数，在那个事件中传递返回值。
fucntion ajaxGet (url,data,callback){
//创建ajax对象
var ajax=new XMLHttpRequest();
//设置url及参数
if(data){
ajax.open('get',url+"?"+data,true);
}else {
}
//发送请求
ajax.send();
//监听事件
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//在事件中获取数据
callback(ajax.responseText);//通过回掉函数来返回值
}
}
}
】
◆post方法【
//思路和ajaxGet方法一样
function ajaxPost(url,data,callback){
//创建ajax对象
var ajax=new XMLHttpRequest();
//设置url
ajax.open('post',url,true);
//设置请求头，然后发送请求
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
if(data){
ajax.send(data);
}else {
ajax.send();
}
//监听事件
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//在事件中获取数据
callback(ajax.responseText);//通过回调函数来返回数据
}
}
}
】
◆ajaxTool方法【
//思路：结合ajaxGet和ajaxPost，增加一点简单逻辑判断
function ajaxTool(url,data,method,callback){
//创建对象
var ajax=new XMLHttpRequest();
//设置url及参数
if(method=='get'){
if(data){
ajax.open(method,url+"?"+data,true);
}else {}
//get发送请求
ajax.send();
}else if(method=='post'){
ajax.open(method,url,true);
//设置请求头，然后发送请求
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//post发送请求
if(data){
ajax.send(data);
}else{
ajax.send()
}
}else {
}
//监听事件
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//在事件中获取数据
callback(ajax.responseText);//通过回掉函数返回数据
}
}
}
】
12.js中的JSON.parse方法可以将字符串格式的js对象转换为真正的js对象，无论是什么对象，也可以转换为数组对象。
13.js中的JSON.stringify()可以将JavaScript对象格式化为JSON字符串。
14.老式IE(8以下)浏览器中没有JSON对象,通过导入JSON2.js框架即可解决，https://github.com/douglascrockford/JSON-js（JSON2）
15.给函数加命名空间的方式，给避免自定义的方法被其它用户自定义的方法覆盖掉,可以通过以下方式添加命名空间。
【
var fox={
sayhi:function(name){
console.log(name);
}
}
fox.sayhi('小panda');//小panda
】
16.优化后的ajax工具库【
//加入一个命名空间
//避免自定义的方法被其它用户自定义的方法覆盖掉
var my = {
//参数介绍
// url : 目标网址
// data: 传递的数据 （user=sad）
// method：请求的方式 （get、set）
// sucess：请求成功后的回调函数
ajaxGet: function(option) {
//创建ajax对象
var ajax = new XMLHttpRequest();
//设置url及参数
if (option.data) {
ajax.open('get', option.url + "?" + option.data, true);
} else {
ajax.open('get', option.url, true);
}
//发送请求
ajax.send();
//监听事件
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
//在事件中获取数据
option.sucess(ajax.responseText); //通过回掉函数来返回值
}
}
},
ajaxPost: function(option) {
//创建ajax对象
var ajax = new XMLHttpRequest();
//设置url
ajax.open('post', option.url, true);
//设置请求头，然后发送请求
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if (option.data) {
ajax.send(option.data);
} else {
ajax.send();
}
//监听事件
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
//在事件中获取数据
option.sucess(ajax.responseText); //通过回调函数来返回数据
}
}
},
ajaxTool: function(option) {
//创建对象
var ajax = new XMLHttpRequest();
//设置url及参数
if (option.method == 'get') {
if (option.data) {
ajax.open(option.method, option.url + "?" + option.data, true);
} else {
ajax.open('get', option.url, true);
}
//get发送请求
ajax.send();
} else if (option.method == 'post') {
ajax.open(option.method, option.url, true);
//设置请求头，然后发送请求
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//post发送请求
if (option.data) {
ajax.send(option.data);
} else {
ajax.send()
}
} else {}
//监听事件
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
//在事件中获取数据
option.sucess(ajax.responseText); //通过回掉函数返回数据
}
}
}
};
】
2.表单的两种提交方式
◆get：是在url中传递数据（xxx.php?name=jack&age=18），但是有缺点，地址栏的url中能够看到你传递的数据、传递数据的大小有限制、并且不能上传文件。
◆post：url中看不到数据、可以上传文件、上传文件的大小没有限制，但是服务器端会对大小做限制，所以需要修改服务器端的配置文件，如php中php.ini文件。
3.ajax发送请求的两种方式
◆get方式：【
1.创建异步对象
var ajaxGet=newXMLHttpRequest();
2.设置url地址请求参数及请求方式
ajaxGet.open('get','get.php?name=jack&age=28',true);
3.发送请求
ajaxGet.send();
4.监听事件
ajaxGet.onreadystatechange=function(){
if(ajaxGet.readyState==4&&ajaxGet.status=200){
console.log(ajaxGet.responseText);//获取结果
}
}
5.在事件中获取结果
】
◆post方式：【
1.创建异步对象
var ajaxPost=new XMLHttpReuqest();
2.设置url地址及请求方式
ajaxPost.open('post','post.php',true);
//使用ajax发送post请求还需要设置请求头，在单独上传文件的时候不需要设置请求头
ajaxPost.setRequestHeader("Content-type","application/x-www-form-urlencoded");
3.发送请求并设置参数
ajaxPost.send('name=jack&age=28');
4.监听事件
ajaxPost.onreadystatechange=function(){
if(ajaxPost.readyState==4&&ajaxPost.status=200){
console.log(ajaxPost.responseText);//获取结果
}
}
5.在事件中获取结果
】
3.实际开发中get、post的选取，后台程序员会通过文档或者口头的方式相告之，如果不考虑提交文件，其实get和post的作用基本一样，除了写法不同，自己写demo的时候可以自行选择使用get还是post。
4.css3中背景大小样式(background-size)加上背景的复合写法
◆background: url(1.png) no-repeat scroll center center/cover;
5.php文件中没有设置header函数的编码，但是如果你是把响应的内容传给了一个自己编码的文件，那么响应的内容就会以那个文件的编码格式进行解码。
6.php之所以被称为"最好的编程语言"，因为它十分方便，基本上所有的功能它都有封装成方法。
7.php读取文件的函数
◆file_get_contents("info/news/txt");
◆
◆
8.xml文件介绍
◆是按照某种既定的格式写的字符串
◆最开始要写版本号（可写可不写）
◆统统使用双标签
◆最外层 需要写一个根节点
◆标签的名字是可以随意写的
◇不要使用数字及特殊符号开头
◇不要使用中文
◆如果写了版本号，如<?xml version="1.0" encoding="UTF-8"?>，那么必须放在第一行，否则会报错。
◆如果使用php读取，然后输出，那么就需要设置header函数中的content-type原本的text/html改为 text/xml。
9.使用ajax获取xml
◆通过异步对象的事件获取数据的时候不再获取responseText，而是获取responseXML，返回的对象的一个xml文档对象，和html的文档对象一样可以使用操作dom的方式来操作这个文档对象，从而获取其中的dom元素达到获取数据的目的。
10.使用ajax获取json
◆xml在实际开发中使用的比较低，xml大，解析起来很麻烦，xml写起来也很麻烦。
◆json在实际开发中使用的比较高，json是一种格式的字符串，基本所有的语言都有将json字符串转化为该语言对象的语法。
◆json其实就是js中的对象的两种字面量中的一种表现形式，
◆json字符串，如果是对象就使用{}包裹起来，如果是数组就使用[]包裹起来，属性名必须使用双引号包裹，属性名跟属性值之间使用:隔开，属性值也必须使用双引号包裹（如果数据类型不是字符串可以不适用双引号），var jsonStr='{"name":"jack","age":20}';
◆如果要将对应的json字符串转化为对应的js对象，使用一个全部的变量JSON，使用它的JSON.parse()方法，var jsonStr='{"name":"jack","age":20}';，JSON.parse(jsonStr);//转化为js对象
◆ajax获取json对象的方式是，在ajax的事件中获取数据，然后使用JSON.parse将字符串转化为js对象，JSON.parse(ajax.responseText);。
11.封装 ajax的get与post请求方式的方法（额外加一个两种都有的方法）
◆get方法【
//思路：传递url地址 传递url参数 传递一个回调函数，保证监听的事件完毕后获取返回值，事件的本质就是方法，如果你在一个方法中使用renturn，那么并不会让最外面的方法能够获取到返回值的，所以你可以使用回调函数，在那个事件中传递返回值。
fucntion ajaxGet (url,data,callback){
//创建ajax对象
var ajax=new XMLHttpRequest();
//设置url及参数
if(data){
ajax.open('get',url+"?"+data,true);
}else {
}
//发送请求
ajax.send();
//监听事件
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//在事件中获取数据
callback(ajax.responseText);//通过回掉函数来返回值
}
}
}
】
◆post方法【
//思路和ajaxGet方法一样
function ajaxPost(url,data,callback){
//创建ajax对象
var ajax=new XMLHttpRequest();
//设置url
ajax.open('post',url,true);
//设置请求头，然后发送请求
ajax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
if(data){
ajax.send(data);
}else {
ajax.send();
}
//监听事件
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//在事件中获取数据
callback(ajax.responseText);//通过回调函数来返回数据
}
}
}
】
◆ajaxTool方法【
//思路：结合ajaxGet和ajaxPost，增加一点简单逻辑判断
function ajaxTool(url,data,method,callback){
//创建对象
var ajax=new XMLHttpRequest();
//设置url及参数
if(method=='get'){
if(data){
ajax.open(method,url+"?"+data,true);
}else {}
//get发送请求
ajax.send();
}else if(method=='post'){
ajax.open(method,url,true);
//设置请求头，然后发送请求
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//post发送请求
if(data){
ajax.send(data);
}else{
ajax.send()
}
}else {
}
//监听事件
ajax.onreadystatechange=function(){
if(ajax.readyState==4&&ajax.status==200){
//在事件中获取数据
callback(ajax.responseText);//通过回掉函数返回数据
}
}
}
】
12.js中的JSON.parse方法可以将字符串格式的js对象转换为真正的js对象，无论是什么对象，也可以转换为数组对象。
13.js中的JSON.stringify()可以将JavaScript对象格式化为JSON字符串。
14.老式IE(8以下)浏览器中没有JSON对象,通过导入JSON2.js框架即可解决，https://github.com/douglascrockford/JSON-js（JSON2）
15.给函数加命名空间的方式，给避免自定义的方法被其它用户自定义的方法覆盖掉,可以通过以下方式添加命名空间。
【
var fox={
sayhi:function(name){
console.log(name);
}
}
fox.sayhi('小panda');//小panda
】
16.优化后的ajax工具库【
//加入一个命名空间
//避免自定义的方法被其它用户自定义的方法覆盖掉
var my = {
//参数介绍
// url : 目标网址
// data: 传递的数据 （user=sad）
// method：请求的方式 （get、set）
// sucess：请求成功后的回调函数
ajaxGet: function(option) {
//创建ajax对象
var ajax = new XMLHttpRequest();
//设置url及参数
if (option.data) {
ajax.open('get', option.url + "?" + option.data, true);
} else {
ajax.open('get', option.url, true);
}
//发送请求
ajax.send();
//监听事件
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
//在事件中获取数据
option.sucess(ajax.responseText); //通过回掉函数来返回值
}
}
},
ajaxPost: function(option) {
//创建ajax对象
var ajax = new XMLHttpRequest();
//设置url
ajax.open('post', option.url, true);
//设置请求头，然后发送请求
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
if (option.data) {
ajax.send(option.data);
} else {
ajax.send();
}
//监听事件
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
//在事件中获取数据
option.sucess(ajax.responseText); //通过回调函数来返回数据
}
}
},
ajaxTool: function(option) {
//创建对象
var ajax = new XMLHttpRequest();
//设置url及参数
if (option.method == 'get') {
if (option.data) {
ajax.open(option.method, option.url + "?" + option.data, true);
} else {
ajax.open('get', option.url, true);
}
//get发送请求
ajax.send();
} else if (option.method == 'post') {
ajax.open(option.method, option.url, true);
//设置请求头，然后发送请求
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//post发送请求
if (option.data) {
ajax.send(option.data);
} else {
ajax.send()
}
} else {}
//监听事件
ajax.onreadystatechange = function() {
if (ajax.readyState == 4 && ajax.status == 200) {
//在事件中获取数据
option.sucess(ajax.responseText); //通过回掉函数返回数据
}
}
}
};
】
