ajax学习过程

说到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时发送同步请求

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

原文链接：https://www.f2er.com/ajax/163129.html

猜你在找的Ajax相关文章