异步请求ajax

最新推荐文章于 2022-11-27 11:05:02 发布

清风明月_vip

最新推荐文章于 2022-11-27 11:05:02 发布

阅读量73

点赞数

本文链接：https://blog.csdn.net/huanglitai/article/details/104350893

版权

Ajax介绍

产生

Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.

“Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。

而Ajax这项技术，是Google在Google Labs发布Google Maps和Google Suggest后真正为人所认识。

概念

AJAX 即 “ Asynchronous Javascript And XML” （异步 JavaScript 和 XML ），是指一种创建交互式网页应用的网页开发技术。

通过在后台与服务器进行少量数据交换， AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX ）如果需要更新内容，必须重载整个网页页面

Ajax使用

jQuery 对 Ajax 操作进行了封装, 在 jQuery 中

最底层的方法时 $.ajax(),

第二层是 load(), $.get() 和 $.post(),

第三层是 $.getScript() 和 $.getJSON()

常用三种方式

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

注意事项：中文会乱码并且数据不能超过2kb

$.post(url,date,function(data){},dataType)

注意事项：跟get比对，支持中文，并且大数据量数据

$.ajax({url, type , data , dataType, success , error})

完美最常用

<script type="text/javascript">
	$.post('ajax_2.jsp',function(data){$("#car").html(data)},'text')
	$.get('ajax_3.jsp',function(data){$("#book").html(data)},'text')
	$.ajax({
		url:'ajax_4.jsp',//路径
		type:'post', //方式 post 和get
// 		data:{} ,参数 以键值对形式
		dataType:'text',//返回的数据格式 text json
		async:true, //异步 默认false , 
		success:function(data){  //成功回调函数
			$("#hero").html(data)
		},
		error:function(){//错误回调函数
			alert("失败")
		}
	})
</script>

表单序列化

jQuery 为准备 “发送到服务器的 key/value 数据” 提供了一个简化的方法: serialize(). 该方法作用于一个 jQuery 对象, 能将 DOM 元素内容序列化为字符串, 用于 Ajax 请求.

使用 serialize() 方法可以自动完成对参数的 url 编码

因为该方法作用于 jQuery 对象, 所以不光只要表单能使用, 其它选择器选取的元素也能使用它.


$('form').submit(function() {

alert($(this).serialize());

return false;

});

结果：a=1&b=2&c=3&d=4&e=5

原生ajax（ajax的底层实现）

概念

XHR英文全名XmlHttpRequest，中文可以解释为可扩展超文本传输请求。Xml可扩展标记语言，Http超文本传输协议，Request请求。XMLHttpRequest对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。当页面全部加载完毕后，客户端通过该对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。 XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问，包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应，并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest，它并不限于和 XML 文档一起使用：它可以接收任何形式的文本文档。XMLHttpRequest 对象是名为 AJAX 的 Web 应用程序架构的一项关键功能。

实例

<script type="text/javascript">

// 2 创建xhr

var request=new XMLHttpRequest();

// 3 准备 调用open

var method="GET";

var url=“你请求的地址”;

request.open(method,url);

// 4 发送请求

request.send(null);

// 5 等待接受 onreadystatechange

request.onreadystatechange=function(){

// 6判断readyState  4 为完成

    if(request.readyState==4){

    //  7判断status 200 ok 304 没有被修改

             if(request.status==200 || request.status==304){

            // 8打印内容 responseText

            alert(request.responseText)

            }

    }

}

}

</script>

</head>

<body>

明瑞教育，世界第一

<a href="helloAjax.txt">test</a>

</body>

清风明月_vip

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
异步请求ajax

Ajax介绍产生Ajax被认为是(Asynchronous JavaScript and XML的缩写）。现在，允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.“Ajax”这个名字是在2005年2月，Adaptive Path的Jesse James Garrett在他的文章Ajax:A New Approach to Web Application中创造。...
复制链接

扫一扫