ajax初体验

最新推荐文章于 2024-10-04 20:38:15 发布

一林1024

最新推荐文章于 2024-10-04 20:38:15 发布

阅读量20

点赞数

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/2301_76394170/article/details/131026877

版权

什么是ajax

一种创建交互式网页应用的网页开发技术。

一种用于异步显示数据的相关技术（在不重新加载网页的情况下发送和检索数据。

一种利用XML Http Request对象和服务器进行数据交互的方式

为了实现异步通讯，提高用户体验度，而将很多旧知识（XML,DOM,JavaScript,HTML,Jquery,Css……）重新融合的一个新的知识框架

为什么要学ajax

只要涉及到了交互，那就需要用到ajax，所以为了使页面活过来，实现动态更新，那就需要用到ajax

ajax使用的技术

HTML / XHTML和CSS - 这些技术用于显示内容和样式。
DOM - 用于动态显示和与数据交互。
XML - 用于与服务器之间传送数据
XMLHttpRequest - 用于客户端和服务器之间的异步通信。
JavaScript - 主要用于客户端验证。

ajax有哪些优点？

快速回复
带宽利用率
在从服务器检索数据之前，不会阻止用户。
它允许我们只将重要数据发送到服务器。
它使应用程序具有交互性和更快速。

又有哪些缺点

取决于JavaScript
安全问题
调试很困难

ajax如何使用：

ajax常用的请求方式有post,get,delete。不常用copy、head、link等等。

get

表单

<form action="/login" target="_blank" method="GET">
    <input type="text" name="email"/>
    <input type="passsword" name="password" />
    <button type="submit">
        提交
    </button>
</form>

xhr

var xhr = new XMLHttprequest();
xhr.open("GET","ajax_test.html",true);
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("fname=Henry&lname=Ford");

post

与上面趋同

delete

如果不用 ajax 发送 PUT，我们可以通过设置一个隐藏域设置 _method 的值，如下：

<form action="/emps" method="post">
	<input type="hidden" name="_method" value="PUT">
	<input type="text" name="username">
	<input type="password" name="password">
    <input type="submit"/>
</form>

浏览器 form 表单只支持 GET 与 POST 请求，而DELETE、PUT 等 method 并不支持，Spring3.0 添加了一个过滤器，可以将这些请求转换为标准的 http 方法，使得支持 GET、POST、PUT 与 DELETE 请求。

ajax 发送 delete请求

删除员工

function deleteEmp(empId){
    $.ajax({
        url : "emps",
        data : {_method : "DELETE", empId : empId},
        type : "POST",
        success : function(result){

        }
    })
}

发送表单 ajax 请求：

$("#updateBtn").click(function(){
			$.ajax({
				url : "emps",
				data : $("#updateEmpFormNode").serialize()+"&_method=put",
				type : "post",
				success : function(result){
					alert(result);
				}
			})
			
		})