Ajax学习笔记demo

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优点：

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）、空行和请求数据四部分组成

响应报文: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>