Ajax

最新推荐文章于 2025-03-16 10:00:00 发布

Dawn_WL

最新推荐文章于 2025-03-16 10:00:00 发布

阅读量326

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/Dawn_WL/article/details/78170225

本文介绍了Ajax技术的工作原理及其实现方式，包括通过GET、POST和Ajax进行异步加载的方法，并对比了Ajax与传统form表单提交的区别。同时，文章还概述了Web2.0的发展历程及其主要特征。

Ajax:

异步加载数据

1、实现即时检查是否可用

2、实现无刷新的用户登录

3、实现搜索自动提示

web2.0：

web1.0 1996年250，000网站，web2.02006年80,000,000网站

特点：

1、用户贡献内容

2、内容聚合RSS

3、更丰富的“用户体验”

4、无刷新的好处

什么是ajax：

只刷新局部页面的技术

1、Javascript更新局部的页面

2、xml一般用于请求数据和响应数据的封装

3、xmlhttprequest对象：发送请求到服务器并获得返回结果

4、css美化页面样式

5、异步：发送请求后不等返回结果，由回调函数处理结果

XMLHttpRequest:

异步加载的三种方式：get加载，post加载，ajax加载

$(function(){
  			$("#post").click(function(){
  				var user=$("#user").val();
  				var pwd=$("#pwd").val();
  				$.get('post?user='+user+'&pwd='+pwd,function(data){
  					if(data=='1') {
  						alert('登录成功');
  					} else {
  						alert('登录失败');
  					}
  				})
  			})
  		})

$(function(){
  		$("#post").click(function(){
  			var user=$("#user").val();
  			var pwd=$("#pwd").val();
  			$.post('post',{
  				'user':user,
  				'pwd':pwd
  			},function(data){
  				if(data=="1"){
  					alert("登录成功");
  				}else{
  					alert("登录失败");
  				}
  			})
  		})
  	})

$(function(){
  		$('#login').click(function(){
  			var name=$("#name").val();
  			var pwd=$("#pwd").val();
  			//发送到后台去验证
  			$.ajax({
  				type:"get",
  				url:"login",
  				async:true,
  				data:{
  					'name':name,
  					'pwd':pwd
  				},
  				success:function(data){
  					alert(data);
  				}
  			});
  		})
  	})

form表单和ajax的区别: