Java教程

Ajax学习笔记demo

本文主要是介绍Ajax学习笔记demo,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

AJAX学习

AJAX简介:

全称:Asynchronous JavaScript and XML (JavaScript执行异步网络请求(JS和XML)),通过AJAX可以在浏览器向服务器发送异步请求

优势无刷新获取数据

使命:在asp.net mvc中为了降低ControllerView的耦合性,同时提高服务器的性能,实现真正的前后端分离,通过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优点:

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

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

    异步交互:客户端发送看照片的请求后,不需要等待服务端响应结束就可以发送二个请求。

  2. 允许你根据用户事件更新部分页面的内容(事件:鼠标事件、键盘事件等等)

  3. 可以减少服务器压力,也可以节省带宽,提高响应速度,增强用户体验

AJAX缺点:

  1. 没有浏览历史,不能回退
  2. 存在跨域问题(跨域资源共享 (CORS)(或通俗地译为跨域资源共享)是一种基于 HTTP 头的机制,该机制通过允许服务器标示除了它自己以外的其它 origin(域,协议和端口),使得浏览器允许这些 origin 访问加载自己的资源)
  3. 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)、空行和请求数据四部分组成

image-20220425213957575

响应报文: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>
这篇关于Ajax学习笔记demo的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!