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}}