标签:
The Write Less,Do More——jQuery下
目录
The Write Less,Do More——jQuery下 1
1、通过jQuery的ajax底层实现$.ajax()解决跨域问题 15
功能:用于遍历jQuery对象
基本语法:
jQuery对象.each(callback):该函数只有一个参数,要求是一个callback函数,函数的格式如下:
function callback(i,item){}
参数说明:
jQuery对象中拥有多少个元素,那么我们的callback函数就会自动执行多少次。
i:遍历时,系统会自动将当前元素的索引下标放入变量i中,默认从0开始
item:便利是,系统会自动将当前元素的本身放入变量item中,其就是当前的dom对象
例1:通过each实现对三个层的内容进行遍历,并更改其内容为第1个div元素…
运行效果:
例2:替换当前页面的img中的src属性更换为不同的三张图片
demo02_each.html
运行效果:
如果是get请求,就要分5步
如果是post请求,就要分6步
//1)创建Ajax对象
var xhr = createXhr();
//2)设置回调函数
xhr.onreadystatechange = function(){
//6)判断与执行
}
//3)初始化ajax
xhr.open(‘post’,’demo01.php’);
//4)设置请求头信息
xhr.setRequestHeader(‘Content-type’,’application/x-www-form-urlencoded’);
//5)发送ajax请求
xhr.send(data);
在jQuery中的ajax实现有二种方式,三种方法
方式一:ajax的底层实现
l jQuery.ajax(options)
方式二:ajax的高级实现
l jQuery.get(url,[data],[callback])
l jQuery.post(url,[data],[callback])
jQuery.ajax(options) === $.ajax
参数说明:
options:要求该参数为一个json对象
l async :是否异步 ,默认为true
l cache :缓存,bool类型,true:缓存,false:不缓存,默认为true
l complete :当ajax状态码为4时,所触发的回调函数
l contentType :设置请求头信息
l data :ajax发送时,所传递的参数,要求是一个字符串
l dataType :期待的返回值类型,text,xml,json,默认为text
l success :当ajax状态为4且http响应状态码为200所触发的回调函数
l type :ajax发送的请求类型:get,post
l url :请求的url地址
例1:
demo03_ajax.html
效果:
注:运行以上代码,我们发现,当在IE浏览器下运行时,系统还是会产生缓存问题,那么如何解决缓存呢?
答:可以通过cache方式解决缓存问题
例2:
例3:通过ajax发送数据到服务器端
返回结果:hello zhangsan
例4:通过ajax发送post请求
返回结果:hello zhangsan
注:在ajax底层实现中可以不添加请求头信息,系统会自动追加请求头到发送数据中
例5:通过ajax底层实现返回两个数的四则
返回值类型
text文本、xml格式、json格式
运行结果:
l jQuery.get(url,[data],[callback]) :模拟ajax的get请求
l jQuery.post(url,[data],[callback]) :模拟ajax的post请求
参数说明:
url:要请求的url地址
[data]:要发送的数据,要求该参数为json对象
[callback]:当ajax状态码为4且http响应状态码为200时,所触发的回调函数
[type]:期待的返回值类型,text,xml,json
通过运行可知,虽然以上程序可以正常运行,但还是存在缓存问题,那么如何解决呢?
运行效果:
运行效果:
1)xml数据的解析
结果如下:
2)通过jQuery方式进行解析
var person=$(msg).find(“person”);
person.children(“name”).text());
person.children(“jian”).text());
person.children(“cheng”).text());
运行结果:
2)json数据的解析
运行效果:
标签:
原文地址:http://www.cnblogs.com/lifushan/p/5469371.html