AJAX

一、ajax的原理:

通过XMLHttpRequest()对象 向服务器发出 异步 请求;从服务器获取数据 通过js Dom操作更新页面
异步:向服务器发送请求 不阻碍用户的操作 实现无刷新数据更新

二、Ajax的优点:

1、最大的一点是能在不刷新整个页面的情况下维持与服务器通信 这使得web应用程序迅捷的响应用户交互,
在页面内与服务器通信给用户的体验非常好。
2、使用异步方式与服务器通信,不需要打断用户的操作,具有更加迅速的响应能力。
3、可以把以前一些服务器负担的工作转嫁到客户端,利用客户端闲置的能力来处理,减轻服务器和带宽的负担,
节约空间和宽带租用成本。并且减轻服务器的负担,ajax的原则是“按需取数据”,可以最大程度的减少冗余请求,
和响应对服务器造成的负担。
4、基于标准化的并被广泛支持的技术,不需要下载插件或者小程序 但需要客户允许JavaScript在浏览器上执行。
5.界面与应用分离 Ajax使得界面与应用分离,也就是数据与呈现分离 有利于分工合作。

三、Ajax的缺点:

1、ajax不支持浏览器back按钮。在动态更新页面的情况下,用户无法回到前一页的页面状态,因为浏览器仅能记忆历史纪录中的静态页面
2、安全问题 AJAX暴露了与服务器交互的细节,就如同对企业数据建立了一个直接通道。
这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。。
3、对搜索引擎的支持比较弱。
4、破坏了程序的异常机制。
5、不容易调试。
6.不能很好地支持移动设备 例如手机APP;
7.客户端肥大,太多客户段代码造成开发上的成本

四、Ajax的转换

通过Ajax的函数封装,获取到这个json文件 通过json.parse()或 jaon.stringify 的方法。
将这个json文件解析成数组或字符串,然后循环遍历获取
例如:
//obj-->string json字符串 JSON.stringify();
//string json字符串-->obj JSON.parse();

五、 Ajax请求数据的过程 步骤


1.创建Ajax对象
创建一个能够发数据的对象;--->XMLHttpRequest //数据请求协议
创建一个请求对象 new XMLHttpRequest(); 兼容所有浏览器
new XMLHttpRequest();
new ActiveXObject("mircosoft.XMLHTTP");//只兼容IE6浏览器使用
2.打开请求
发送数据的方式 向服务器传输数据 open("get/post","提交的地址","是否异步");
3.发送请求
(1)、get 在网址栏 域名 /?text=123&pass=12135
区别:get 方式 提交数据时 数据 url/?名称=数据&名称=数据
通过send();提交数据
(2)、post方法是提交时 设置请球头 声明数据类型
setRequestHeader('content-type','application/x-www-form-urlencoded')
通过send(data);提交数据
4.等待服务器,返回内容
XMLHttpRequest 对象属性描述
onreadystatechange状态改变的事件触发器,每个状态改变时都会触发这个事件处理器,通常会调用一个JavaScript函数
readyState
请求的状态。有5个可取值:
0 = 未初始化,
1 = 正在加载,
2 = 已加载,
3 = 交互中,
4 = 完成
responseText 服务器的响应,返回数据的文本。请求的数据文本 ----->string
status 服务器的HTTP状态码(如:404 = "文件末找到" 、200 ="成功" ,等等)
statusText 服务器返回的状态文本信息 ,HTTP状态码的相应文本(OK或Not Found(未找到)等等)
status: 服务器的状态码
200 服务器请求成功
404 服务器请求失败
302 307 服务器请求异常

六、post get 服务器获取和提交方式的区别

get方式:get请求数据时 是将数据暴露在网址中 /?user=value&pass=value&时间毫秒数
1-提交数据的大小受限制 比较小
2-数据提交相对不安全 提交的数据在网址栏中通过字符串拼接发送
3-有缓存问题 需要使用不断改变字符 后缀 来解决 添加:"&"+new Date().getTime();
4-有些浏览器不能提交中文数据 encoddeURI();解决中文 ie不能 encodeURI("你好")

post方式:post请求数据 是通过请求的域名
1-理论上大小不受限制 可设置
2-相对于get方式比较安全
3-没有缓存问题
4-可以提交中文数据
5-提交数据时需要 请求头 声明请求数据类型
6-提交的数据要通过send()传入参数提交数据
7-content-type :提交的数据格式 application/x-www-form-urlencoded

七 、 Jsonp的原理和用法

1-jsonp是一种解决解决方案
2-Jsonp就是跨域请求数据,通过动态创建script标签,
然后通过标签的src属性 获取 js文件中的程序 该程序就是一个回调函数 参数是请求
其他站点的资源文件;所以要预先定义好回调函数,不是ajax技术Jsonp的原理和用法
1-jsonp是一种解决解决方案
2-Jsonp就是跨域请求数据,通过动态创建script标签,
然后通过标签的src属性 获取 js文件中的程序 该程序就是一个回调函数 参数是请求
其他站点的资源文件;所以要预先定义好回调函数,不是ajax技术

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值