ajax学习过程

最新推荐文章于 2024-05-24 11:16:31 发布

辉蛋儿

最新推荐文章于 2024-05-24 11:16:31 发布

阅读量655

点赞数

分类专栏： Ajax+Jquery

本文链接：https://blog.csdn.net/chen861201/article/details/46969373

版权

Ajax+Jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文作者重新学习了ajax和jquery的基础用法，以提升系统的用户体验。内容包括XMLHttpRequest的核心理解，Ajax应用程序的基本流程，以及一些个人实践示例，特别提到了一个模仿百度提示功能的例子。

摘要由CSDN通过智能技术生成

说到ajax认识它已经好几年，但是之前所谓的认识只是简简单单的会用罢了，最近这段时间用户体验的呼声一直很高，我们的系统也是时候开始进行改造了。

所以借着这个机会，我又开始重新认识重新学习了下jquery和ajax的一些基础用法，希望会对我改造前台系统有帮助。

下面是自己在网上找了一本电子书，用了差不多一天多的时间总结出来的东西，算是给自己一个交代，给别人一些帮助吧。

XMLHttpRequest 是 Ajax 应用程序的核心
Microsoft 浏览器 Internet Explorer 使用 MSXML 解析器处理 XML

接下来就是在所有 Ajax 应用程序中基本都雷同的流程：
1、从 Web 表单中获取需要的数据。
2、建立要连接的 URL。
3、打开到服务器的连接。
4、设置服务器在完成后要运行的函数。
5、发送请求。

#id
<body>
	<div id="d1">hello jquery</div>
</body>
function f(){
	$('#d1').css('font-size','30px');
}
.class
<body>
	<div class="s1">hello jquery</div>
	<div class="s1">hello js</div>
</body>
function f(){
	$('.s1').css('font-size','30px');
}
element
<body>
	<div id="d1">hello jquery</div>
	<div class="s1">hello js</div>
</body>
function f(){
	$('div').css('font-size','30px');
}
selector1,selector2
<body>
	<div id="d1">hello jquery</div>
	<div class="s1">hello js</div>
	<p>空格键</p>
</body>
function f(){
	$('#d1,.s1,p').css('font-size','30px'):
}
select1空格select2
根据select1找到节点后，再去寻找子节点中符合select2的节点（重要）
<body>
    <div id="d1">
	<div id="d2">你好</div>
	<div class="s1">hello js</div>
	<p>空格键</p>
    </div>	
</body>
function f(){
	$('#d1 div').css('font-size','30px');
}
html(),text()
<div class="s1">
	<span>hello js</span>
</div>
function(){
	alert($('#s1').html());
	alert($('#s1').text());
}
val()
<input name="uname"/>
function f(){
	alert($(':text').val('空白格'));
}
attr()
<div class="s1">
	<span>hello js</span>
</div>
function(){
	$('#d1').attr('style','color:red;');
}
DOM对象转换成Jquery对象
function f1(){
	var obj=document.getElementById('a1');
	var $obj=$(obj);
	alert($obj.html());
}
click事件操作表示触发了click事件$obj.click()
function f1(){
	$('#d1').click(function(){
		$(this).html('hello ajax');
	});
}
load()：将服务器返回的数据字节添加到符合要求的节点上
$obj.load(请求地址，请求参数);
有请求参数时，load方法发送post请求，否则发送get请求

get()：发送get类型的请求
$.get(请求地址，请求参数，回调函数，服务器返回的数据类型)
服务器返回的数据类型：
html：html文本
text：文本
json：js对象
xml：xml对象
script：javascript脚本

ajax():$.ajax({});内部选项参数为：
url:请求地址
type：请求方式
data：请求参数
datatype：服务器返回的数据类型
success：服务器正常对应的回调函数
error：服务器出错对应的回调函数。
async：true（缺省），当值为false时发送同步请求

还有一些自己的写的下例子。也一并奉上。。其中最后的一个例子是模仿百度的提示功能。这里是百度云的链接点击打开链接