ajax

最新推荐文章于 2024-09-04 22:20:02 发布

梦想起航-冬

最新推荐文章于 2024-09-04 22:20:02 发布

阅读量151

点赞数

分类专栏： ajax 文章标签： ajax

本文链接：https://blog.csdn.net/weixin_45545454/article/details/104514922

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax----学习笔记

1.0：【服务器和客户端】

1，服务器：服务器就是一台计算机，用于处理请求并通过Internet或本地网络将数据传送到另一台计算机上，服务器的配置要比普通的计算机配置高出很多

2，客户端：也就是用户端，与服务器相对于为客户提供本地服务的程序

3，带宽：又叫频宽，是指在固定的时间可传输的资料的数量，在传输管道中可以传递数据的能力，频宽通常以bps表示。

1.1：【web请求与响应】

1，web请求：就是浏览器向web服务器发送请求任务。

2，web服务器响应：就是web服务器端接收到了浏览器的请求之后，作相应的处理，之后将数据返回到浏览器端。

1.2：【接口】

1，概念：接口就是由后端程序员写的函数，我们通过Ajax技术来调用这个函数。通过调用这个接口来接收服务器的数据

1.3：【http协议】

1，http协议是浏览器与服务器之间通信的一种约定

2，是从服务器到本地浏览器的传输协议，他可以使浏览器更加高效，使网络传输减少

3，http协议和https协议的区别：

。https需要得到ca的申请证书。

。http是超文本传输协议，信息是明文传输，https则是具有安全性的ssl加密传输协议

。http和https使用的是不同的连接方式用的端口也不一样，前者是80，后者是443

1.4：【请求发送的三个部分】

1，请求行：包括请求方式和请求地址

2，请求头：包含一些客户端环境信息，身份验证信息等等

3，请求体：本次请求携带的参数

1.5：【响应的三个部分】

1，响应行

2，响应头

3，响应体：内容在响应体中

1.6：【认识Ajax】

1，应用场景：在不刷新页面的情况下，去请求服务器的数据。简称局部更新

2，ajax是：异步javascript和XML，是一种创建交互式或网页应用的开发技术

3，浏览器通过内置对象XMLHttpRequest向服务器发送请求，并可以接收服务器返回的数据，实现这一过程的技术叫做Ajax

4，Ajax的优点：

。在不更新整个页面的前提下维护数据，这使得web应用程序更为迅捷的回应用户的动作

。分离开发，提高开发效率

。ajax不需要任何的浏览器插件，但是需要用户允许javascript在浏览器上运行

。使用异步方式和服务器通信不会打断用户的操作，具有更加迅速的响应能力

。可以把一些服务器负担的工作转移到客户端，利用客户端闲置的能力来处理，减轻服务器和带宽的负担，节约空间和宽带租用成本

5，Ajax的缺点：

。他能破坏浏览器的后退与加入收藏书签的功能。在动态更新页面的情况下，用户无法回到前一个页面的状态

。会暴露和服务器之间的交互的逻辑和数据

。对搜索引擎的支持比较弱

。破坏程序的异常机制

。一些手机设备，现在不能很好的支持ajax。

。不容易调试

6，ajax的原理：相当于在用户和服务器之间加了一个中间层，使用户操作与服务器的响应异步化。

1.7：【jquery中的Ajax】

1，使用**$.ajax({})**：里面接收一个参数是一个对象，对象中有以下几个键值对信息

。url：要请求的地址

。type：请求的方式有（get请求，post请求，put请求，delete请求）

。data：可以是一个对象，里面写入需要传递的参数

。dataType：请求的数据类型

。success（斯科赛斯）：是一个回调函数，函数有一个参数是服务器返回的数据

。error（哎弱）：也是一个回调函数，是请求错误调用的函数

。contentType：使用FormData对象传递数据，不需要设置请求头所以需要把参数设置为false

。processData（爬赛斯）：不需要jquery帮助我们处理参数，因为格式是FormData对象，所以不需要jquery处理，需要设置为false.

。timeout：设置请求的超时时间（毫秒）如果请求超过设置的时间，将会终止请求

。global：默认为true，表示是否触发全局Ajax事件，如果为false就不会触发全局事件。

2，使用：$.get(url, {请求的参数}, callback, type(设置浏览器返回的数据类型))。

3，使用：$.post(uel, {请求的参数}, callback, type(设置浏览器返回的数据类型))。

4，使用：$.getScript(url, callback)：在加载页面的时候并不需要全部加载js文件，有些js文件需要在特定的情况下加载。所有使用这个方法可以在特定的时机下加载js文件。

5，使用**$.getJSON(“url”, callback)**：用来动态的加载json文件，获取里面的数据。

6，jquery中的Ajax的全局事件：如果有多个ajax请求的话，并且请求的数据都一样的话，可以使用全局ajax 事件来操作，能够获取到每一个ajax请求的数据

		1，$(document).ajaxStart(callback(event, res))：//ajax请求开始前
        
		2，$(document).ajaxSend(callback(event, res))：//ajax请求时
        
		3，$(document).ajaxSuccess(callback(event, res))：//ajax获取数据后
        
		4，$(document).ajaxComplete(callback(event, res))：//ajax请求完成时
        
		5，$(document).ajaxError(callback(event, res))：//ajax请求发送错误后
        
		6，$(document).ajaxStop(callback(event, res))：//ajax请求停止后
        
        
        //格式：
        
        	$.ajax({

				url : "http://localhost:8000/admin/userinfo_get",
				type : "get",
			});

			$.ajax({
				url : "http://localhost:8000/admin/userinfo_get",
				type : "get",
			});

			$(document).ajaxSuccess(function (event, res) {
				//第一个参数是事件对象
				//第二个餐宿是返回的数据相关信息
				console.log(res.responseJSON);
			});

1.8：【原生的Ajax】

1，概念：原生Ajax是通过XMLHttpRequest对象来实现的

2，请求的流程（步骤）：

。创建XMLHttpRequest对象，但是他有兼容性，在IE中使用的是ActiveXObject（啊踢翻的x 奥不站科特）对象，所以创建的时候需要做兼容性处理

。调用open(“请求方式”, “请求的地址”, “Boolean”)方法准备发送，如果第三个参数为true的话表示异步，如果为false的话说明是同步的方法

。调用send()：方法执行发送动作

。调用onreadystatechange（瑞第斯tei特）回调函数，数据会返回到回调函数中

。调用readyState判断是否等于4，如果等于4说明浏览器接收到了服务器返回的数据

1，0：未初始化，还没有调用send方法

2，1：已经调用send方法，正在发送请求

3，2：send方法执行完成服务器端已经接收到全部响应内容

4，3：服务器正在解析响应内容

5，4：服务器端内容解析完成，返回到客户端客户端可以使用了

。调用status（斯dei特斯）属性判断是否是200，是200的话说明是正常数据，如果是404的话，说明请求资源没有找到，如果是500的话是后端错误。304表示缓存。301表示重定向（之前访问的页面存在，后来地址搬家了。403表示不允许访问接口）

。调用responseText（瑞斯棒斯）属性就是服务器返回来的数据，服务器返回到的数据是String类型的

3，get和post的区别：

。get的区别：

1，需要在open方法中的第二个参数的url地址中拼接需要传递的参数，参数需要用 encodeURI）（嗯口的）(url地址)方法编码，防止中文出现乱码。并且send方法里面要传入null参数，兼容浏览器

2，get请求的参数是在请求行中，因为他没有请求体

3，get请求的参数在地址栏中是可以看见的。

。post的区别：

1，请求的时候准备发送的下面，设置请求头信息，调用setRequestHeader(“Content- Type”,“application（啊破kei剩）/x-www-form-urlencoded”);方法参数是固定，接着传递的参数在send方法中传入。

2，post请求的参数在请求体中

3，post请求的参数在地址栏中看不到

1.9：【理解同步和异步】

1，同步：代码的书写顺序和执行的顺序是一样的。同步事物代码可能会造成堵塞。

2，异步：代码中的书写顺序和执行的顺序不相同。异步的代码不会造成堵塞

2.0：【onload】

1，概念：方法在Es5中新增的方法，他也是回调函数，跟onreadystatechange的用法一样，只不过onload 方法在IE中有兼容性

2，IE浏览器的缓冲问题：在IE浏览器中get请求的方式在IE中会有缓冲的问题，也就是如果请求的地址和参数是一样的话，他只会向服务器发送一次请求，把请求的数据保存下来，一直给客户端使用。

解决办法：在请求地址的后面拼接毫秒值

2.1：【XML数据的优缺点】

1，缺点：

。xml文件庞大，文件格式复杂，传输占带宽

。服务器和客户端都需要花费大量的代码开解析xml，导致服务器端和客户端代码变得异常复杂且不易维护

。客户端不同浏览器之间解析xml的方法不一致，需要重复的编写很多的代码

。服务器和客户端解析xml需要花费较多的资源和时间

2，优点：

。格式统一，符合标准

。容易与其他系统进行远程交互，数据共享比较方便

2.2：【JSON数据优缺点】

1，优点：

。数据格式比较简单，容易读写并且格式都是压缩的，占用带宽小

。容易解析，客户端javascript可以简单的通过eval_r()进行JSON数据的读取

。支持多种语言，c,c++,c#,java,perl,python,php,rudy

。JSON格式能直接为服务器代码使用，大大简化了服务器端和客户端的代码开发量，并且容易维护

2，缺点：

。没有xml格式这么推广的深入人心和喜用广泛，没有xml那么的通用性

。安全性问题：如果和不受信任的服务或不受信任的浏览器一起使用会非常的危险。容易遭到黑客的攻击

。支持工具有限：json只有有限的支持工具

。json数据过于严格

2.3：【FormData对象】

1，用处1：可以搜集用户的信息，只有设置了name属性的元素才能获取到数据，他的构造函数接收一个参数就是form表单元素，就可以获取表单里面的所有的元素的值。

			//格式：
				var fd = new FormData(form元素);
			
			//方法：
				1，fd.append(key,value)：//向FormData对象中继续添加数据
					
					
				2，fd.get(key)：//根据键获取值
					
					
				3，fd.has（哼斯）(key)：//会返回一个布尔值，表示FormData对象中是否包含某些键
					
					
				4，fd.delete(key)：//从FormData对象中删除键值对
					
					
				5，fd.set(key, value)://给FormData对象中设置键值对，如果对象中有键值对的话，就覆盖

2，用处2：接收一个表单元素，表单元素的file提交按钮的，并且表单元素里面的元素必须设置了name属性才可以收集到参数

3，XMLHttpRequest.upload（啊铺露的）.onprogress（pu ruang 拐 ruai 斯） = function(e){}事件对象来查看文件上传的进度

。属性1：e.total(掏掏)获取的是文件的总大小

。性2：e.loaded(楼dei的)文件的大小

2.4：【模板引擎】

1，模板引擎的好处：

。可维护性（后期更改起来方便）

。可扩展性

。开发效率高

2，模板引擎的作用：使用户界面和业务数据分离而产生的的，他可以生成特定格式的文档。

3，格式：

1，循环语法：

			{{each data item}}
			{{/each}}

梦想起航-冬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ajax

ajax----学习笔记1.0：【服务器和客户端】 1，服务器：服务器就是一台计算机，用于处理请求并通过Internet或本地网络将数据传送到另一台计算机上，服务器的配置要比普通的计算机配置高出很多 2，客户端：也就是用户端，与服务器相对于为客户提供本地服务的程序 3，带宽：又叫频宽，是指在固定的时间可传输的资料的数量，在传输管道中可以传递数据的能力，频宽通常 ...
复制链接

扫一扫

专栏目录