web学习笔记22-jQuery学习-2(post ajax)
2017-09-11 22:07
531 查看
1、jquery的请求$.post方法：
2、jquery的请求$.ajax方法：
3、js高级应用-function理解：
3、js高级应用-prototype属性：
4、js高级应用-prototype继承：
5、js高级应用-继承的封装01：
6、js高级应用-继承的封装02：
7、js高级应用-继承的封装03：
我们可以使用jquery的post的方法发送请求，例如: html页面：
<!DOCTYPE html>
<html>
<head>
<title>ajax.html</title>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script src="../../js/jquery-1.4.2.js"></script>
<script src="post.js"></script> //我们自己的js脚本，同级目录下
</head>
<body>
This is my HTML page. <br>
</body>
</html>
使用post的js脚本（servlet就不写了，很简单）
$().ready(function(){
//第一个参数 url
//第二个参数 客户端传递到服务器端的数据,我们使用get不用提交数据，传个null
//第三个参数 是一个回调函数.是服务器成功返回时要执行的函数.
$.post("../../AjaxPostServlet",null,function(data){
alert(data);
});
});这样html页面中就可以简单的使用post发送一个请求了。
2、jquery的请求$.ajax方法：
$.ajax方法里面传一个json结构，写法更灵活
$().ready(function(){
$.ajax({
url:'../../AjaxAjaxServlet',
success:function(){//服务器端如果成功的响应，则执行该函数
alert("success");
},
error:function(){//如果服务器端出现异常，则执行该函数
alert("error");
},
type:'POST'
});
});3、js高级应用-function理解：
//该函数是一个对象,该对象是由Function产生的
function Person(){
}
每个function对象默认就有一个constructor 属性
alert(Person.constructor);
给Person对象设置属性
Person.a = 1;
var json = {
aa:'aa'
};
Person.b = json;//给Person对象天界另一个属性为b,值为json对象命名空间：
function namespace(namespaceString){
var temp = [];//声明了一个空的数组
var array = namespaceString.split(".");
for(var i=0;i<array.length;i++){
temp.push(array[i]);
//把多个json对象添加了window上。
//eval函数的功能就是把字符串转化成JavaScript代码执行
eval("window."+temp.join(".")+"={}");
//把多个function添加到了window上
//eval("window."+temp.join(".")+"=function(){}");
}
}
var tempnamespace = namespace("acom.example.test");通过浏览器调试可以看到，我们在window下面有了多级的json属性
3、js高级应用-prototype属性：
每个对象都有一个prototype属性，该属性默认就是一个空的json {}
使用浏览器调试可以看到function Person(){
}
Person.prototype.a = 1;//给Person类的 prototype属性设置属性a=1
var p = new Person();
p.b=2;注意：这个是给p对象设置的一个属性b，这个b只属于p这个对象 例如：
function Student(){
}
Student.prototype.setId = function(id){
this.id = id;
}
Student.prototype.getId = function(){
return this.id;
}
var s = new Student();
s.setId(4);
alert(s.getId());这样就可以通过get set操作对象的属性。
4、js高级应用-prototype继承：
prototype继承非常简单，让一个类的prototype指向另一个就可以实现继承。 例如：
function Student(){
}
Student.prototype.setName = function(name){
this.name = name;
}
Student.prototype.getName = function(){
return this.name;
}
function SuperStudent(){
}
//SuperStudent的prototype指向Student的prototype
SuperStudent.prototype = Student.prototype;
//也可以通过这个方式，不推荐，因为又创建了个对象，占用内存
//SuperStudent.prototype = new Student();
var superStudent = new SuperStudent();
superStudent.setName("aaa");//可以使用Student的属性方法了
alert(superStudent.getName());以上只是简单的实现了继承的原理
5、js高级应用-继承的封装01：
上面的继承太原始，我们可以通过一个巧妙的方式来做。 只是继承了原有对象的属性，没有做扩展。 演示： extend.js:
function extend(json){
//声明了一个函数
function F(){
}
//遍历json对象中的每一个key,value值，把每一个key,value值赋值给F.prototype
for(var i in json){
F.prototype[i] = json[i];
}
return F;//F就是一个对象
}
//通过传一个json对象数据给一个函数，来继承一个对象
var Person = extend({
aa:'aa',//需要的属性值
bb:'bb'
});
var p = new Person();
alert(p.aa);这个设计很巧妙，利用循环json结构来赋值属性，返回对象 extend01.js: 引入命名空间升级
function namespace(namespaceString){//这个上面介绍过
var temp = [];//声明了一个空的数组
var array = namespaceString.split(".");
for(var i=0;i<array.length;i++){
temp.push(array[i]);
//把多个json对象添加了window上。
//eval函数的功能就是把字符串转化成JavaScript代码执行
eval("window."+temp.join(".")+"={}");
}
}
namespace("com.example");
//这个就是给命名空间 window.com.example(一个空的json对象)，设置key为extend，value为function()
com.example.extend = function (json){
function F(){
}
for(var i in json){
F.prototype[i] = json[i];
}
return F;//F就是一个对象
}
//将对象的属性值用一个json结构传给extend函数，返回的就是一个经过处理的对象
var Person = com.example.extend({
aa:'aa',
bb:'bb'
});
var p = new Person();
alert(p.aa);我们看到很多的开源框架都有这种写法，其实内部的实现原理都类似。
6、js高级应用-继承的封装02：
升级下继承方式，传递多个参数。继承的另一种形式，对原有的类的扩展 演示： 需求： 写一个命名空间com.example,在该命名空间下有一个方法extend 该方法有两个参数json,prop 该方法会调用两次，第一次传递一个参数，该参数是json对象 第二次传递两个参数，第一个参数是function,第二个参数是prop extend.js:
namespace("com.example");//这个函数和上面一样
com.example.extend = function(json,prop){
function F(){
}
//第一次调用extend方法
if (typeof json == "object") {//json参数是一个json对象
for(var i in json){//把json对象中的每一个key,value赋值给F的prototype
F.prototype[i] = json[i];
}
}
//第二次调用extend方法
if(typeof json == "function"){
F.prototype = json.prototype;//让F的prototype指向json的prototype
//再把prop的每一个key,value值赋值给F的prototype
for(var j in prop){
F.prototype[j] = prop[j];
}
}
return F;
}
var Person = com.example.extend({
aa:'aa',
bb:'bb'
});
var p = new Person();
alert(p.aa);
var SuperPerson = com.example.extend(Person,{
cc:'cc'
});
var sp = new SuperPerson();
alert(sp.cc);
alert(p.cc)//同样可以输出 cc其实SuperPerson就是继承Person，并且多添加了属性。就是对Person的扩展。 在很多的开源框架中可以看到类似的用法，原理差不多。
7、js高级应用-继承的封装03：
另一种形式，传递2个参数，判断类型，进行处理 需求： 写一个函数，该函数的名称是extend,有两个参数：destination,source 1、如果destination和source都是json对象，完成从source到destination的复制 2、如果destination是一个函数，source是一个json对象，则把source中的每一个key,value对赋值给destination的prototype 3、如果destination,source都是函数，则把source的prototype中的内容赋值给destination的prototype extend.js:
namespace("com.example");
com.example.extend = function(destination,source){
if(typeof destination == "object"){//destination是一个json对象
if(typeof source == "object"){//source是一个json对象
//把source中的每一个key,value值赋值给destination
for(var i in source){
destination[i] = source[i];
}
}
}
if(typeof destination == "function"){
if(typeof source == "object"){
for(var i in source){
destination.prototype[i] = source[i];
}
}
if(typeof source == "function"){
destination.prototype = source.prototype;
}
}
return destination;
}
//测试
var destination = com.example.extend({
cc:'cc'
},{
aa:'aa',
bb:'bb'
});
alert(destination.aa);
//测试
function Person(){
}
com.example.extend(Person,{
aa:'aa'
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- learning jQuery 学习笔记十六（+jQuery 1.4.1 API）-- AJAX----$.get() & $.post()
- 【Web前端学习笔记】AJAX_原生AJAX,JQuery下的AJAX,跨域
- JavaScript权威设计--jQuery,Ajax.animate,SVG(简要学习笔记二十)[完结篇]
- jQuery学习笔记之 Ajax操作篇（三） - 过程处理
- java web 学习笔记四 使用ajax响应异步请求
- Asp.Net Ajax 学习笔记22 使用Microsoft Ajax Library中的浏览器兼容功能
- learning jQuery 学习笔记十五（+jQuery 1.4.1 API）-- AJAX----load(url, [data], [callback])
- AJAX学习笔记之 客户端请求方式 get 和post 模式
- js中的ajax和jquery中的ajax学习笔记
- 20151223jquery学习笔记--Ajax表单提交
- web前端－－知识点，笔记叠加（javascript,jquery,html5+css3.0,ajax）
- 【jQuery学习笔记--------AJAX之jQuery角度分析】
- 20151207jquery 学习笔记 Ajax
- ajax学习笔记：通过jquery来创建
- jQuery学习笔记--ajax查询，jQuery解析返回的json数据 详解
- jQuery学习笔记：Ajax(一)
- jquery中ajax学习笔记4
- jQuery学习笔记--$.post(),val(),html()
- jquery的ajax学习笔记
- 【学习笔记】锋利的jQuery（四）AJAX