赞
踩
ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xmlhttp对象,使用此对象与后台通信。jquery将它封装成了一个函数$.ajax(),我们可以直接用这个函数来执行ajax请求。
ajax需要在服务器环境下运行。
$.ajax使用方法
常用参数:
1、url 请求地址
2、type 请求方式,默认是’get’,常用的还有’post’
3、dataType 设置返回的数据格式,常用的是’json’格式,也可以设置为’text’
4、data 设置发送给服务器的数据
5、success 设置请求成功后的回调函数
6、error 设置请求失败后的回调函数
7、async 设置是否异步,默认值是’true’,表示异步
以前的写法:
$.ajax({
url: '/change_data',
type: 'get',
dataType: 'json',
data:{'code':300268}
success:function(dat){
alert(dat.name);
},
error:function(){
alert('服务器超时,请重试!');
}
});
新的写法(推荐):
$.ajax({
url: '/change_data',
type: 'get',
dataType: 'json',
data:{'code':300268}
})
.done(function(dat) {
alert(dat.name);
})
.fail(function() {
alert('服务器超时,请重试!');
});
$(function(){ /*$.ajax({ url:'js/data.json', type:'get', dataType:'json' /*success:function(dat){ // console.log(dat); $('.login_btn').hide(); $('.login_info em').html( dat.name ).parent().show(); }, error:function(){ alert('服务器超时,请重试!'); } }).done(function(dat){ $('.login_btn').hide(); $('.login_info em').html( dat.name ).parent().show(); }).fail(function(){ alert('服务器超时,请重试!'); }) */ // 上面是完整写法,可以简写成下面$.get的写法: $.get('js/data.json',function(dat){ $('.login_btn').hide(); $('.login_info em').html( dat.name ).parent().show(); }); })
ES6是JavaScript语言的新版本,它也可以叫做ES2015,之前学习的JavaScript属于ES5,ES6在它的基础上增加了一些语法,ES6是未来JavaScript的趋势,而且React库中大量使用了ES6的语法,所以掌握这些常用的ES6语法是必须的。
let和const是新增的声明变量的开头的关键字,在这之前,变量声明是用var关键字,这两个关键字和var的区别是,它们声明的变量没有预解析,let和const的区别是,let声明的是一般变量,const申明的常量,不可修改。
alert(iNum01) // 弹出undefined // alert(iNum02); 报错,let关键字定义变量没有变量预解析 // alert(iNum03); 报错,const关键字定义变量没有变量预解析 var iNum01 = 6; // 使用let关键字定义变量 let iNum02 = 12; // 使用const关键字定义变量 const iNum03 = 24; alert(iNum01); // 弹出6 alert(iNum02); // 弹出12 alert(iNum03); // 弹出24 iNum01 = 7; iNum02 = 13; //iNum03 = 25; // 报错,const定义的变量不可修改,const定义的变量是常量 alert(iNum01) alert(iNum02); alert(iNum03);
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <script> // 用var定义变量,变量有预解析的特性 // alert(iNum01);//undefined var iNum01 = 12; // alert(iNum01); //12 //let定义的变量没有预解析,下面这一句就报错 在初始化之前无法访问'iNum02' // alert(iNum02); //Cannot access 'iNum02' before initialization let iNum02 = 24; // alert(iNum02); //24 iNum02 =25; // alert(iNum02);//25 //const定义的变量没有预解析,下面这一句出错 在初始化之前无法访问'iNum03' // alert(iNum03);//Cannot access 'iNum03' before initialization const iNum03 = 36; alert(iNum03); //36 //对常量变量赋值。const定义的是常量,它的值不能修改,下面这一句出错 // iNum03 = 37; // alert(iNum03);//Assignment to constant variable. </script> <body> </body> </html>
ES6 允许我们按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)
1、数组的解构赋值
const arr = [1, 2, 3]
let [a, b, c] = arr
console.log(a, b, c); // 1 2 3
2、对象的解构赋值
const obj = { name: 'tom',address:'beijing', age: '100'}
let {name, age} = obj // 变量名称必须和对象的key同名
console.log(name, age); //tom 100
3、函数参数的解构赋值
const person = { name: '小明', age: 11}
function printPerson({name, age}) { // 函数参数可以解构一个对象
console.log(`姓名:${name} 年龄:${age}`);
}
printPerson(person) // 姓名:小明 年龄:11
ES6中提供了模版字符串,用`(反引号)标识,用${}将变量括起来
let name = '小明';
let age = 11;
alert(`我的名字是${name},我的年龄是${age}岁。`)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //数组的解构赋值 let aList = [1,2,3]; let [a,b,c] = aList; console.log(a,b,c);//1 2 3 // 对象的解构赋值 let person = {name:"tom",age:18}; let {name,age} = person; console.log(`姓名:${name} 年龄:${age}`);//姓名:tom 年龄:18 // 函数参数的解构赋值 function fnAlertPerson({name,age}){ console.log(`我的姓名:${name} 我的年龄:${age}`); alert( `我的名字是:${name}, 我的年龄是:${age}` ); } fnAlertPerson(person); //我的姓名:[object Object] 我的年龄:undefined </script> </head> <body> </body> </html>
扩展运算符(…),它用于把一个数组转化为用逗号分隔的参数序列,它常用在不定参数个数时的函数调用,数组合并等情形。
let arr = [1,2,3];
let arr2 = [...arr,4];
console.log(arr2) // [1,2,3,4]
function fnAdd(a,b,c){
alert(a + b + c);
}
fnAdd(...arr); // 6
function fnMyalert(...a){
console.log(a);
alert(a[0]);
alert(a[1]);
}
fnMyalert(10,5); // [10,5] 10 5
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> let arr = [1,2,3]; //下面这种方式不能复制数组 let arr2 = arr; //只是指向同一个地址 //用for循环赋值数组 let arr3 = []; for (var index = 0; index < arr.length; index++) { arr3.push(arr[index]); } //通过扩展运算符复制数组 let arr4 = [...arr,5]; arr.push(4); // alert(arr); //1 2 3 4 // alert(arr2); //1,2,3,4 // alert(arr3); //1 2 3 alert(arr4); // 1 2 3 5 function fnAdd(a,b,c){ alert(a+b+c); } // fnAdd(...arr); //6 把数据arr传进去 function fnConsole(...a){ //10,5,6 console.log(a); } fnConsole(10,5,6); </script> </head> <body> </body> </html>
可以把箭头函数理解成匿名函数的第二种写法,箭头函数的作用是可以在对象中绑定this,解决了JavaScript中this指定混乱的问题。
// 定义函数的一般方式 /* function fnRs(a,b){ var rs = a + b; alert(rs); } fnRs(1,2); */ // 通过匿名函数赋值来定义函数 /* var fnRs = function(a,b){ var rs = a + b; alert(rs); } fnRs(1,2); */ // 通过箭头函数的写法定义 var fnRs = (a,b)=>{ var rs = a + b; alert(rs); } // fnRs(1,2); // 一个参数可以省略小括号 var fnRs2 = a =>{ alert(a); } fnRs2('haha!'); // 函数中如果只有一个return语句,return和大括号都可以省略 /* var fnAdd = function(a,b){ return a + b; } */ var fnAdd = (a,b) => a+b; // 函数的返回值如果是javascript对象时,对象需要加括号 /* let fn = function(){ return {"a":5}; } */ // fn = ()=>{"a":5} // 上面这么写是错的,需要写成下面的形式,返回的对象要加括号 fn = ()=>({"a":5})
// 箭头函数的作用,可以绑定对象中的this
var person = {
name:'tom',
age:18,
showName:function(){
setTimeout(()=>{
alert(this.name);
},1000)
}
}
person.showName();
javascript之前是没有模块的功能的,之前做js模块化开发,是用的一些js库来模拟实现的,在ES6中加入了模块的功能,一个js文件就是一个模块,js文件中需要先导出(export)后,才能被其他js文件导入(import)
ES6的导出分为名字导出和默认导出
1、名称导出
导入的变量名必须和导出的变量名一致
// mod01.js文件中导出 export let iNum01 = 12; export let fnMyalert = function(){ alert('hello'); } // index.html文件中导入 <script type="module"> import {iNum01,fnMyalert} from "./js/mod01.js"; alert(iNum01); fnMyalert(); </script> // mod01.js中还可以写成如下: let iNum01 = 12; let fnMyalert = function(){ alert('hello'); } export {iNum01,fnMyalert}
2、默认导出(default export) 一个模块只能有一个默认导出,对于默认导出,导入的名称可以和导出的名称不一致,这对于导出匿名函数或类非常有用。
// mod02.js文件中导出
export default {"name":"tom","age":18}
// index.html文件中导入
<script type="module">
import person from "./js/mod02.js";
alert(person.name);
</script>
对象的简写
javascript对象在ES6中可以做一些简写形式,了解这些简写形式,才能方便我们读懂一些在javascript代码中简写的对象。
let name = '李思';
let age = 18;
/*
var person = {
name:name,
age:age,
showname:function(){
alert(this.name);
},
showage:function(){
alert(this.age);
}
}
*/
// 简写成下面的形式
var person = {
name,
age,
showname(){
alert(this.name);
},
showage(){
alert(this.age);
}
}
person.showname();
person.showage();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=\, initial-scale=1.0"> <title>Document</title> <script> let name = "tom"; let age = 18; // let person = { // name:name, // age:age, // showname:function(){ // console.log(this.name); // }, // showage:function(){ // console.log(this.age); // } // } //上面对象可以简写成下面的形式 let person = { name, age, showname(){ console.log(this.name); }, showage(){ console.log(this.age); } } person.showname(); person.showage(); </script> </head> <body> </body> </html>
ES6 封装了class语法来大大简化了类的创建和类的继承
// 定义类,类的首字母要大写 class Person { // 定义构造函数 constructor(name,age){ this.name = name; this.age = age; } // 定义方法 showname(){ alert('我的名字是:' + this.name); } showage(){ alert('我的年龄是:' + this.age); } } // 通过类实例化对象 let Andy = new Person('刘德华',55); // 调用对象的方法 Andy.showname(); Andy.showage(); // 定义类继承Person类 class Student extends Person{ constructor(name,age,school){ super(name,age); this.school = school; } showschool(){ alert('我的学校是:' + this.school); } } // 通过类实例化对象 let Tom = new Student('小明','16','北京一中'); // 调用对象的方法 Tom.showname(); Tom.showschool();
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> //定义一个类 class Person{ constructor(name,age){ this.name = name; this.age = age; } showname(){ console.log("我的名称:"+this.name); } showage(){ console.log("我的年龄:"+this.age); } } //通过类来实例化一个对象 let Andy = new Person('刘德华',55); //调用对象上面的方法 // Andy.showname(); // Andy.showage(); //定义类继承Person class Student extends Person{ constructor(name,age,school){ super(name,age); this.school = school; } showschool(){ console.log("我的学校是:"+this.school); } } var xiaoming = new Student("小明",15,"武汉一中"); xiaoming.showage(); xiaoming.showname(); xiaoming.showschool(); </script> </head> <body> </body> </html>
es6新增了异步操作的写法,来解决异步操作函数回调的问题,这个新增的写法就是Promise对象,Promise实际上就是一个特殊的Javascript对象,反映了”异步操作的最终值”。”Promise”直译过来有预期的意思,因此,它也代表了某种承诺,即无论你异步操作成功与否,这个对象最终都会返回一个值给你。
在实际开发中,如果我们在写ajax程序时,我们如果希望两个ajax程序都执行完后,再去做一件事情,我们实现的方法可以是,在一个ajax中嵌套另外一个ajax程序:
$.ajax({
url:'data01.json',
type:'get',
dataType:'json',
success:function(dat1){
$.ajax({
url:'data01.json',
type:'get',
dataType:'json',
success:function(dat2){
console.log([dat1,dat2])
}
})
})
上面的写法不方便编写,也不方便阅读,Promise对象就可以解决这个问题
// 实例化一个Promise对象 var pro01 = new Promise(function(resolve,reject){ $.ajax({ url:'js/data01.json', type:'get', dataType:'json' }).done(function(dat){ resolve(dat) }).fail(function(err){ reject(err) }) }); var pro02 = new Promise(function(resolve,reject){ $.ajax({ url:'js/data02.json', type:'get', dataType:'json' }).done(function(dat){ resolve(dat) }).fail(function(err){ reject(err) }) }); // 通过Promise对象来处理回调 pro01.then(function(dat){ console.log(dat); }).catch(function(err){ console.log(err) })
上面将两个ajax请求分别放在两个promise对象中,其中resolve参数是处理请求成功的回调函数,reject是处理失败的回调函数,接着就可以通过这个对象,来处理ajax的回调,相当于把回调拆开了写。 如果希望两个ajax程序都执行完后,再去做一件事情,可以写成如下的形式:
Promise.all([pro01,pro02]).then(result=>console.log(result));
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/jquery-1.12.4.min.js"></script> <script> //方式一 // $.ajax({ // url:'js/data01.json', // type:'get', // dataType:'json', // success: function(dat01){ // // console.log(dat); //{"name": "张三"} // $.ajax({ // url:'js/data02.json', // type:'get', // dataType:'json', // success: function(dat02){ // // console.log(dat); //{"name": "张三"} // console.log([dat01,dat02]); // }, // error: function(err){ // } // }) // }, // error: function(err){ // } // }) //方式二 let pro01 = new Promise(function(resolve,reject){ $.ajax({ url:'js/data01.json', type:'get', dataType:'json', success:function(dat){ resolve(dat); }, error:function(err){ reject(err); } }) }); let pro02 = new Promise(function(resolve,reject){ $.ajax({ url:'js/data02.json', type:'get', dataType:'json', success:function(dat){ resolve(dat); }, error:function(err){ reject(err); } }) }); //then请求成功 pro01.then(function(dat){ console.log(dat); }).catch(function(err){ }) Promise.all([pro01,pro02]).then(re=>{ console.log(re); }) </script> </head> <body> </body> </html>
/* NodeJS Static Http Server - http://github.com/thedigitalself/node-static-http-server/ By James Wanga - The Digital Self Licensed under a Creative Commons Attribution 3.0 Unported License. A simple, nodeJS, http development server that trivializes serving static files. This server is HEAVILY based on work done by Ryan Florence(https://github.com/rpflorence) (https://gist.github.com/701407). I merged this code with suggestions on handling varied MIME types found at Stackoverflow (http://stackoverflow.com/questions/7268033/basic-static-file-server-in-nodejs). To run the server simply place the server.js file in the root of your web application and issue the command $ node server.js or $ node server.js 1234 with "1234" being a custom port number" Your web application will be served at http://localhost:8888 by default or http://localhost:1234 with "1234" being the custom port you passed. Mime Types: You can add to the mimeTypes has to serve more file types. Virtual Directories: Add to the virtualDirectories hash if you have resources that are not children of the root directory */ var http = require("http"), url = require("url"), path = require("path"), fs = require("fs") port = process.argv[2] || 8888; var mimeTypes = { "htm": "text/html", "html": "text/html", "jpeg": "image/jpeg", "jpg": "image/jpeg", "png": "image/png", "gif": "image/gif", "js": "text/javascript", "css": "text/css", "json":"text/json" }; var virtualDirectories = { //"images": "../images/" }; http.createServer(function(request, response) { var uri = url.parse(request.url).pathname , filename = path.join(process.cwd(), uri) , root = uri.split("/")[1] , virtualDirectory; virtualDirectory = virtualDirectories[root]; if(virtualDirectory){ uri = uri.slice(root.length + 1, uri.length); filename = path.join(virtualDirectory ,uri); } fs.exists(filename, function(exists) { if(!exists) { response.writeHead(404, {"Content-Type": "text/plain"}); response.write("404 Not Found\n"); response.end(); console.error('404: ' + filename); return; } if (fs.statSync(filename).isDirectory()) filename += '/index.html'; fs.readFile(filename, "binary", function(err, file) { if(err) { response.writeHead(500, {"Content-Type": "text/plain"}); response.write(err + "\n"); response.end(); console.error('500: ' + filename); return; } var mimeType = mimeTypes[path.extname(filename).split(".")[1]]; response.writeHead(200, {"Content-Type": mimeType}); response.write(file, "binary"); response.end(); console.log('200: ' + filename + ' as ' + mimeType); }); }); }).listen(parseInt(port, 10)); console.log("Static file server running at\n => http://localhost:" + port + "/\nCTRL + C to shutdown");
data01.json和data02.json示例
{"name":"张三"} {"name":"李思"}
使用node server.js
map() 方法
map方法可以分别处理数组中的成员,返回一个新数组,也可以用于遍历数组
let aList = [1,2,3];
aList.map(function(a){
alert(a);
})
// 弹出 1 2 3
concat() 方法用于连接新的数组成员或者其他数组,返回一个新的数组
let aList01 = [1,2,3];
let aList02 = ['a','b'];
let aList03 = arr.concat(4,5);
let aList04 = aList01.concat(aList02);
console.log(aList03) // [1,2,3,4,5]
console.log(aList04) // [1,2,3,'a','b']
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> var aList = ['a','b','c']; //第一个参数数组成员值,第二个参数是成员的索引值 aList.map((item,i)=>{ console.log(item+" | "+i); }) //concat会返回一个新的数组 var aList2 = aList.concat('d','f'); var aList3 = [1,2]; var aList4 = aList.concat(aList3); console.log(aList2); console.log(aList4); </script> </head> <body> </body> </html>
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。