Ajax学习笔记demo

2022-04-29 20:34:22 阅读：144 来源： 互联网

标签：XML HTTP 请求 demo 笔记 Ajax 服务器服务端客户端

AJAX学习

AJAX简介：

全称：Asynchronous JavaScript and XML （JavaScript执行异步网络请求（JS和XML）），通过AJAX可以在浏览器向服务器发送异步请求

优势：无刷新获取数据

使命:在asp.net mvc中为了降低Controller与View的耦合性，同时提高服务器的性能，实现真正的前后端分离，通过Ajax发送请求，当服务端接受该请求后将处理的数据通过JSON数据格式返回给视图，最后通过浏览器渲染呈现给用户。

工作原理流程图：

异步请求的工作流程

注意：AJAX不是新的编程语言。

XML简介：

XML 可扩展标记语言

XML 被设计用来传输和存储数据

XML 和HTML类似 HTNL里是预订标签 XML里没有预订标签

比如有一个商品数据

goodsname="麻辣条"；price=5.00；

XML表示：

<goods>

<goodsnaame>麻辣条</goodsname>

<price>5.00</price>

</goods>

JSON表示：

{"goodsname:"麻辣条"，“price”:"5.00"}

AJAX优点：

可以无需刷新页面与服务器进行通信

同步交互：客户端发送一个查看图片的请求，待服务端响应结束后才能发送第二个请求（第二个请求：看价格等）。

异步交互：客户端发送看照片的请求后，不需要等待服务端响应结束就可以发送二个请求。
允许你根据用户事件更新部分页面的内容（事件：鼠标事件、键盘事件等等）
可以减少服务器压力，也可以节省带宽，提高响应速度，增强用户体验

AJAX缺点：

没有浏览历史，不能回退
存在跨域问题（跨域：资源共享 (CORS)（或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它 origin（域，协议和端口），使得浏览器允许这些 origin 访问加载自己的资源）
SEO不友好（SEO:搜索引擎优化 (SEO) 通常是指对网站的部分内容进行细微的修改）

HTTP协议：

简介：超文本传输协议（HTTP)是一个用于传输超媒体文档（例如 HTML）的应用层协议，用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。

工作原理：HTTP协议工作于客户端-服务端架构上。浏览器作为HTTP客户端通过URL向HTTP服务端即WEB服务器发送所有请求。

Web服务器有：Apache服务器，IIS服务器（Internet Information Services）等。

Web服务器根据接收到的请求后，向客户端发送响应信息。

HTTP默认端口号为80，但是你也可以改为8080或者其他端口。

客户端请求消息：

客户端发送一个HTTP请求到服务器的请求消息包括：请求行（request line）、请求头部（header）、空行和请求数据四部分组成

响应报文:HTTP 响应与 HTTP 请求相似状态行、响应头、响应正文

常见的状态码：

200 ok 客户端请求成功
301 Moved Permanently 请求永久重定向
302 Moved Temporarily 请求临时重定向
304 Not Modified 文件未修改，可以直接使用缓存的文件
400 Bad Request 由于客户端请求语法错误，不能被服务器所理解
401 Unauthorized 请求未经授权
403 Forbidden 服务器收到请求，但是拒绝提供访问
404 Not Found 请求的资源不存在
500 Internal Server Error 服务器发生不可预期的错误，导致无法完成客户端的请求
503 Service Unavailable 服务器当前不能够处理客户端的请求，稍后再试

详细学习地址：

安装node.js

地址：

介绍：Node.js是一个Javascript运行环境，通俗的说：Node.js就是运行在服务端的JavaScript；比如它能做什么：命令行工具、单元测试工具、复杂逻辑的网站等等。

最大的特点：采用异步式I/O与事件驱动

Ajax基本语法：

$.ajax({	
// 发送地址 
// 1.不写默认朝当前所在url提交数据 	
// 2.全写 指名道姓 https://www.baidu.com 	
// 3.只写后缀/login/	url: '',  	type: 'get/post',  
// 请求方式 默认 get  	data: {'username':'jason', 'password':123} 
// 要发送的数据	success:function(args){		
// 回调函数(异步回调机制)	}})解析(重要):  
//  1.当你在利用ajax进行前后端交互的时候    
//  2.当后端给你返回结果的时候会自动触发 args接受后端的返回结果

$.ajax({    

      type: '',       // 请求的方式，例如 GET 或 POST    

      url: '',        // 请求的 URL 地址    

      data: { },      // 这次请求要携带的数据    

      success: function(res) { } // 请求成功之后的回调函数

})

get请求和post请求的差别：

GET请求的数据会暴露在地址栏中，而POST请求则不会
get有数据传输长度限制，而post没有更好地用于提交传输大量数据
当输入传输未知字符等，post比get更稳定更可靠，安全性更高（比如提交用户、密码等）

Ajax demo练习

<script type="text/javascript">
		$(function(){
		        //请求参数
		        var list = {};
		        //
		        $.ajax({
		            //请求方式
		            type : "POST",
		            //请求的媒体类型
		            contentType: "application/json;charset=UTF-8",
		            //请求地址
		            url : "http://localhost:8080/admin/Index/",
		            //数据，json字符串
		            data : JSON.stringify(list),
		            //请求成功
		            success : function(result) {
		                console.log(result);
		            },
		            //请求失败，包含具体的错误信息
		            error : function(e){
		                console.log(e.status);
		                console.log(e.responseText);
		            }
		        });
		    });
	 </script>

标签：XML,HTTP,请求,demo,笔记,Ajax,服务器,服务端,客户端
来源： https://www.cnblogs.com/andjieran/p/16208122.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9