博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端知识之Ajax
阅读量:6176 次
发布时间:2019-06-21

本文共 1988 字,大约阅读时间需要 6 分钟。

Asynchronous JavaScript and XML

通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。是在不重新加载整个页面的情况下,与服务器交换数据并异步更新部分网页的技术。

1282009-20190425153902425-998678260.png

在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。

工作原理:

XMLHttpRequest对象 在后台,异步地与服务器交换数据。
1282009-20190425153826735-596550937.png

原生Ajax创建

最早是IE5中以组件的形式实现的。由于非W3C标准,实现方式不统一:

IE5、6它被实现为一个ActiveX对象;

其他浏览器把它实现为一个JavaScript对象。

但属性和方法访问是兼容的。

function getHttpObject(){    var xhr  = false;    if(window.XMLHttpRequest){        xhr = new XMLHttpRequest();    }else if(window.ActiveXObject){        xhr = new ActiveXObject("Microsoft.XMLHttp");    }    return xhr;}

常用方法、属性

open("method","url")

建立对服务器的调用。url既可以是相对的也可以是绝对的。

send(content)

向服务器发送请求。

setRequestHeader("header","value")

把指定头部设置为所提供的值,比如post请求需要设置setRequestHeader("ContentType","application/x-www-form-urlencoded")告诉服务器正在发送数据,而且该数据已经符合URL编码了。它

之前需要调用open()方法。

readState:请求的状态,0未初始化,1正在加载,2请求已接收,3请求处理中,4响应完成。

onreadystatechange:每个状态改变都会触发这个事件处理器。服务器触发的。
status:服务器的HTTP状态码。
responseXML:服务器响应返回XML类型的数据,文本会存储在该对象中,这个对象可以解析为DOM对象。
responseText:服务器响应HTML、Json类型的数据,文本会存储在该对象中。

服务器返回数据类型的选择

1282009-20190425232126606-574437571.png

jQuery中的Ajax

编写常规的 AJAX 代码并不容易,因为不同的浏览器对 AJAX 的实现并不相同。这意味着您必须编写额外的代码对浏览器进行测试。不过,jQuery 团队为我们解决了这个难题,我们只需要一行简单的代码,就可以实现 AJAX 功能。jQuery对Ajax操作进行了封装。

1282009-20190425232554677-1234632796.png

load()方法

格式:load(url[,data][,callback])

url是请求的地址,后面可以加选择器,对返回的html格式数据筛选;data是发送给服务器的k-v数据;callback请求完成(无论成功失败)后的回调函数。

$("#content").load(this.href,args);
将返回结果直接插入到id=content标签的值中。

get()方法

格式:get(url[,data][,callback][,type])

url是请求的地址;data是发送给服务器的k-v数据;callback请求完成(无论成功失败)后会被触发的的回调函数,响应结果将返回到回调函数的参数里。

type是返回数据的格式,如html、xml、json等。

$.get(url,{"time":new Date()},function(data){                var name = $(data).find("name").text();                var website = $(data).find("website").text();                var email = $(data).find("email").text();                                $("#details").empty()                     .append("

" +name + "

") .append(" "+website+""); });

xml数据解析。

post()同。

getJSON()方法

get(url[,data][,callback],"JSON")一样。

转载于:https://www.cnblogs.com/xiaobingzi/p/10769058.html

你可能感兴趣的文章
添加自定义监控项目配置邮件告警测试告警不发邮件的问题处理
查看>>
solidity智能合约的经典设计模式
查看>>
华为交换网络基础、基本配置、STP/RSTP
查看>>
SpringCloud 微服务 (十七) 容器部署 Docker
查看>>
不定项选择题
查看>>
netty 分析博客
查看>>
Spring Cloud构建微服务架构服务注册与发现
查看>>
BCGControlBar教程:如何将MFC控件的BCGControlBarBCGSuite添加到对话框中
查看>>
深入理解Java8 Lambda表达式
查看>>
Java集合框架面试问题集锦
查看>>
Java每天10道面试题,跟我走,offer有!(六)
查看>>
四种途径提高RabbitMQ传输数据的可靠性(二)
查看>>
c语言实现多态
查看>>
Linux 在 TOP 命令中切换内存的显示单位
查看>>
浏览器的加载与页面性能优化
查看>>
RabbitMQ学习总结(2)——安装、配置与监控
查看>>
Java基础学习总结(5)——多态
查看>>
shell: demo
查看>>
使用vc+如何添加特殊字符的控件(创世纪篇)
查看>>
Linux下的常用信号
查看>>