JQUERY-自定义插件-ajax-跨域访问

正课:

1. ***自定义插件:

2. Ajax

3. *****跨域访问:

1. ***自定义插件:

前提: 已经用html,css,js实现了

2种风格:

1. jQueryUI侵入式:

1. css应提取到独立的css文件中

强调: 所有插件内的子元素选择器都要以插件父元素class开头，避免与其他插件冲突。

2. 定义独立的js文件：

1. 判断是否引入jQuery

2. 在jQuery的原型对象中添加插件函数

1. 侵入class和自定义扩展属性

2. 绑定事件

3. 使用插件:

引入插件.css,

按插件要求编写HTML内容

引入jQuery

引入插件.js

编写自定义脚本: 查找插件父元素，调用插件API

2. Bootstrap DIV式:

1. css应提取到独立的css文件中: 同jQueryUI方式

2. 定义独立的js文件：

强调: 不需要添加函数，不用侵入

3. 使用插件:

引入插件.css

按插件要求编写HTML内容

在HTML元素上，手动添加class和自定义扩展属性

引入jQuery

引入插件.js

强调: 不需要调用任何插件函数

2. Ajax:

$.ajax({

type:"get/post",

url:"xxx.php",

data: 查询字符串/{ 参数:值, 参数:值, ...}/$form.serialize(),

dataType:"json"//如果返回json，则自动转为对象,

success:function(data){ //请求响应结束且成功

},

error:function(){ //请求响应结束，但出错

},

complete:function(){ //只要请求响应结束

}

})//3.x

.then(function(data){ ... })

dataType: 如果服务端定义了响应的内容类型为applicaton/json， 则$.ajax可自动转换，不必写dataType

$.get("url", data, function(data){...}, dataType)

$(parent).load("url",function(){ ... }) 将返回的内容，填充到parent内

$.getJSON()

$.getScript()

$.post()

3. *****跨域请求:

什么是跨域:

1. 域名不同， 2. 二级域名不同, 3. 端口号不同, 4. 协议

问题: 服务端不允许用xhr对象跨域发送ajax请求

解决: 利用可以跨域的元素(link, script, iframe, img, ... )

1.用script变通实现跨域请求:

JSONP: JSON with padding 填充式json

方案1:

服务端: 将返回的数据，填充在一条js语句中返回

客户端: 用script src="http://xxx/xx.php"

问题: 客户端数据的处理逻辑是在服务端写死的，众口难调

方案2:

服务端: 返回一条函数调用的js语句，将数据作为参数

客户端: 提前定义和服务端同名的js函数

问题: 函数名是在服务器端定死的

方案3:

服务端: 先接受客户端传入的函授名参数(callback)

在返回结果中动态拼接函数名

客户端: script src="xxx.php?callback=函数名"

问题: script是写死的，只能在页面加载时发送一次请求

方案4:

客户端: 不要写死script

在处理函数中，动态创建script，发送请求

在处理函数结尾，删除动态创建的script

问题: 和传统ajax不一致！

方案5:

$.ajax({

type:"",

url:"",

data:...,

dataType:"jsonp",

success:function(){

}

})

2. 通过服务器端开放跨域:

php: header('Access-Control-Allow-Origin:http://请求来自的网址');

正课:

1. ***自定义插件:

2. Ajax

3. *****跨域访问:

1. ***自定义插件:

前提: 已经用html,css,js实现了

2种风格:

1. jQueryUI侵入式:

1. css应提取到独立的css文件中

强调: 所有插件内的子元素选择器都要以插件父元素class开头，避免与其他插件冲突。

2. 定义独立的js文件：

1. 判断是否引入jQuery

2. 在jQuery的原型对象中添加插件函数

1. 侵入class和自定义扩展属性

2. 绑定事件

3. 使用插件:

引入插件.css,

按插件要求编写HTML内容

引入jQuery

引入插件.js

编写自定义脚本: 查找插件父元素，调用插件API

2. Bootstrap DIV式:

1. css应提取到独立的css文件中: 同jQueryUI方式

2. 定义独立的js文件：

强调: 不需要添加函数，不用侵入

3. 使用插件:

引入插件.css

按插件要求编写HTML内容

在HTML元素上，手动添加class和自定义扩展属性

引入jQuery

引入插件.js

强调: 不需要调用任何插件函数

2. Ajax:

$.ajax({

type:"get/post",

url:"xxx.php",

data: 查询字符串/{ 参数:值, 参数:值, ...}/$form.serialize(),

dataType:"json"//如果返回json，则自动转为对象,

success:function(data){ //请求响应结束且成功

},

error:function(){ //请求响应结束，但出错

},

complete:function(){ //只要请求响应结束

}

})//3.x

.then(function(data){ ... })

dataType: 如果服务端定义了响应的内容类型为applicaton/json， 则$.ajax可自动转换，不必写dataType

$.get("url", data, function(data){...}, dataType)

$(parent).load("url",function(){ ... }) 将返回的内容，填充到parent内

$.getJSON()

$.getScript()

$.post()

3. *****跨域请求:

什么是跨域:

1. 域名不同， 2. 二级域名不同, 3. 端口号不同, 4. 协议

问题: 服务端不允许用xhr对象跨域发送ajax请求

解决: 利用可以跨域的元素(link, script, iframe, img, ... )

1.用script变通实现跨域请求:

JSONP: JSON with padding 填充式json

方案1:

服务端: 将返回的数据，填充在一条js语句中返回

客户端: 用script src="http://xxx/xx.php"

问题: 客户端数据的处理逻辑是在服务端写死的，众口难调

方案2:

服务端: 返回一条函数调用的js语句，将数据作为参数

客户端: 提前定义和服务端同名的js函数

问题: 函数名是在服务器端定死的

方案3:

服务端: 先接受客户端传入的函授名参数(callback)

在返回结果中动态拼接函数名

客户端: script src="xxx.php?callback=函数名"

问题: script是写死的，只能在页面加载时发送一次请求

方案4:

客户端: 不要写死script

在处理函数中，动态创建script，发送请求

在处理函数结尾，删除动态创建的script

问题: 和传统ajax不一致！

方案5:

$.ajax({

type:"",

url:"",

data:...,

dataType:"jsonp",

success:function(){

}

})

2. 通过服务器端开放跨域:

php: header('Access-Control-Allow-Origin:http://请求来自的网址');