一、Ajax请求

- 现在常见的前后端分离项目中,一般都是服务器返回静态页面后
浏览器加载完页面,运行script中的js代码,通过ajax向后端api发送异步请求
获取数据,然后调用回调函数,将数据添加到页面上

1.1 JQuery封装后的ajax请求

- 注意:jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject

jQuery.get(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。
dataType: 返回内容格式,xml, json, script, text, html jQuery.post(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数
success: 载入成功时回调函数
dataType: 返回内容格式,xml, json, script, text, html jQuery.getJSON(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。 jQuery.getScript(...)
所有参数:
url: 待载入页面的URL地址
data: 待发送 Key/value 参数。
success: 载入成功时回调函数。 jQuery.ajax(...) 部分参数: url:请求地址
type:请求方式,GET、POST(1.9.0之后用method)
headers:请求头
data:要发送的数据
contentType:即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
async:是否异步
timeout:设置请求超时时间(毫秒) beforeSend:发送请求前执行的函数(全局)
complete:完成之后执行的回调函数(全局)
success:成功之后执行的回调函数(全局)
error:失败之后执行的回调函数(全局) accepts:通过请求头发送给服务器,告诉服务器当前客户端课接受的数据类型
dataType:将服务器端返回的数据转换成指定类型
"xml": 将服务器端返回的内容转换成xml格式
"text": 将服务器端返回的内容转换成普通文本格式
"html": 将服务器端返回的内容转换成普通文本格式,在插入DOM中时,如果包含JavaScript标签,则会尝试去执行。
"script": 尝试将返回值当作JavaScript去执行,然后再将服务器端返回的内容转换成普通文本格式
"json": 将服务器端返回的内容转换成相应的JavaScript对象
"jsonp": JSONP 格式
使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数 如果不指定,jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string converters: 转换器,将服务器端的内容根据指定的dataType转换类型,并传值给success回调函数
$.ajax({
accepts: {
mycustomtype: 'application/x-some-custom-type'
}, // Expect a `mycustomtype` back from server
dataType: 'mycustomtype' // Instructions for how to deserialize a `mycustomtype`
converters: {
'text mycustomtype': function(result) {
// Do Stuff
return newresult;
}
},
});
1.2.2 一个简单的Ajax请求
<script type="text/javascript" src="jquery-1.12.4.js"></script>

<script>
$.ajax({
url: 'www.example.com/api/v1/weather/',
type: 'POST', //以Post方式发送请求
dataType:"JSON", //将服务器返回的数据转化为json格式
traditional: true, //当传递数据类型为数组时指定该项
success: function(data, statusText, xmlHttpRequest){
console.log("接收到的数据为:");
console.log(data);
}
})
</script>

  

二、原生Ajax请求
  • 注意:jQuery就是封装的原生ajax请求(XmlHttpRequest对象)
  • 一个XMLHttpRequest对象中的方法:如下
void open(String method,String url,Boolen async)
用于创建请求 参数:
method: 请求方式(字符串类型),如:POST、GET、DELETE...
url: 要请求的地址(字符串类型)
async: 是否异步(布尔类型) void send(String body)
用于发送请求 参数:
body: 要发送的数据(字符串类型) void setRequestHeader(String header,String value)
用于设置请求头 参数:
header: 请求头的key(字符串类型)
vlaue: 请求头的value(字符串类型) String getAllResponseHeaders()
获取所有响应头 返回值:
响应头数据(字符串类型) String getResponseHeader(String header)
获取响应头中指定header的值 参数:
header: 响应头的key(字符串类型) 返回值:
响应头中指定的header对应的值 void abort() 终止请求

  

  • XmlHttpRequest对象的常用属性:如下
Number readyState
状态值(整数) 详细:
0-未初始化,尚未调用open()方法;
1-启动,调用了open()方法,未调用send()方法;
2-发送,已经调用了send()方法,未接收到响应;
3-接收,已经接收到部分响应数据;
4-完成,已经接收到全部响应数据; Function onreadystatechange
当readyState的值改变时自动触发执行其对应的函数(回调函数) String responseText
服务器返回的数据(字符串类型) XmlDocument responseXML
服务器返回的数据(Xml对象) Number states
状态码(整数),如:200、404... String statesText
状态文本(字符串),如:OK、NotFound...

  

一个原生xml ajax请求
//生成一个Xml对象
xhr = new XMLHttpRequest();
//输入连接方式和连接地址
xhr.open("put", "www.xxx.com/api/v2/order/2", true);
//设置请求头为表单数据,向服务器提交时所采用的编码类型,默认的缺省值就是“application/x-www-form-urlencoded”
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset-UTF-8'); // 定义回调函数
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
// 已经接收到全部响应数据,执行以下操作
var data = xhr.responseText; //responseText为服务端返回的文本数据
console.log(data);
}
};
//发送指定表单格式数据
xhr.send('n1=1;n2=2;'); /*如果要发送图片文件的原生数据
1.指定请求头content-Type格式为:multipart/form-data(当发送图片文件等都用该请求头)
xhr.setRequestHeader('Content-Type', 'multipart/form-data') 2.生成FormDate 对象,并拿到上传文件对象
fd = new FormDate();
file_obj = document.getElementById('XX');
将文件对象添加到FormDate对象中:
fd.append("文件名",file_obj); 3.发送文件对象
xhr.send(fd);
*/

  

原生Ajax XMLHttpRequest对象的更多相关文章

  1. 【转载并整理】AJAX XmlHttpRequest对象详解

    一. XMLHttpRequest由来及原生介绍 XMLHttpRequest(XHR)是一个API对象,其中的方法可以用来在浏览器和服务器端传输数据.这个对象是浏览器的js环境提供的.从XHR获取数 ...

  2. 【02】AJAX XMLHttpRequest对象

    AJAX XMLHttpRequest对象   XMLHttpRequest 对象用于与服务器交换数据,能够在不重新加载整个网页(刷新)的情况下,对网页进行部分更新. XMLHttpRequest 对 ...

  3. 不同浏览器创建 ajax XMLHTTPRequest对象的方法及兼容性问题总结

    XMLHttpRequest 对象是AJAX功能的核心,要开发AJAX程序必须从了解XMLHttpRequest 对象开始. 了解XMLHttpRequest 对象就先从创建XMLHttpReques ...

  4. AJAX——XMLHttpRequest对象的使用

    AJAX是web2.0即动态网页的基础,而XMLHttpRequest对象又是AJAX的核心.XMLHttpRequest对象负责将用户信息以异步通信地发送到服务器端,并接收服务器响应信息和数据 一. ...

  5. Ajax XMLHttpRequest对象的三个属性以及open和send方法

    (1)onreadystatechange 属性onreadystatechange 属性存有处理服务器响应的函数.下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行 ...

  6. python_way day21 Django文件上传Form方式提交,原生Ajax提交字符处啊,Django文件上传之原生Ajax方式、jQuery Ajax方式、iframe方式,Django验证码,抽屉示例,

    python_way day21 1.Django文件上传至Form方式 2.原生Ajax文件上传提交表单 使用原生Ajax好处:不依赖jquery,在发送一个很小的文件或者字符串的时候就可以用原生A ...

  7. 实现jquery.ajax及原生的XMLHttpRequest调用WCF服务的方法

    废话不多说,直接讲解实现步骤 一.首先我们需定义支持WEB HTTP方法调用的WCF服务契约及实现服务契约类(重点关注各attribute),代码如下: //IAddService.cs namesp ...

  8. 使用XMLHttpRequest对象完成原生的AJAX请求

    1.大家眼中的Ajax 说到Ajax,只要有过前端开发经验的童鞋一定都不陌生,大都知道它就是一种与后端之间的通信技术,通过这个神奇的家伙,我们不用像传统表单那样填完信息一点提交就呼啦呼啦跳转了.Aja ...

  9. 实现jquery.ajax及原生的XMLHttpRequest跨域调用WCF服务的方法

    关于ajax跨域调用WCF服务的方法很多,经过我反复的代码测试,认为如下方法是最为简便的,当然也不能说别人的方法是错误的,下面就来上代码,WCF服务定义还是延用上次的,如: namespace Wcf ...

随机推荐

  1. C# 设置Excel超链接(一)

    在日常工作中,在编辑文档时,为了方便自己或者Boss能够实时查看到需要的网页或者文档时,需要对在Excel中输入的相关文字设置超链接,那么对于一些在Excel中插入的图片我们该怎么实现超链接呢,下面给 ...

  2. 环境搭建 - Tomcat(Windows)

    Tomcat环境搭建 本文以Windows7下搭建tomcat-8.5.15为示例 下载tomcat压缩包 网址:Tomcat 非C盘根目录新建文件夹:Tomcat D:\tomcat 将tomcat ...

  3. JS的MD5加密

    /* * A JavaScript implementation of the RSA Data Security, Inc. MD5 Message * Digest Algorithm, as d ...

  4. offic|集成|协同OA|移动办公|

    随着互联网时代的日新月异,移动通讯技术的飞速发展,移动网络技术的更新换代,手机.平板电脑等移动设备越来越智能化.越来越多样化,人们对移动办公的需求也在日益增长.在此背景下北京博信施科技有限公司自主研发 ...

  5. OPC协议解析-关于OPC协议的几个问题

    1    什么是OPC协议? 为了便于自动化行业不同厂家的设备和应用程序能相互交换数据,定义了一个统一的接口函数,就是OPC协议规范.有了OPC就可以使用统一的方式去访问不同设备厂商的产品数据. OP ...

  6. python 图片在线转字符画预览

    文章链接:https://mp.weixin.qq.com/s/yiFOmljhyalE8ssAgwo6Jw 关于python图片转字符画,相信大家都不陌生,经常出现在 n个超有趣的python项目中 ...

  7. MIUI10系统怎么样刷成开发版获得ROOT权限

    小米的设备不同手机型号正常情况下小米官方论坛都提供两个不同系统,可分为稳定版和开发版,稳定版没有提供root超级权限管理,开发版中就提供了root超级权限,在很多工作的时候我们需要使用的一些功能强大的 ...

  8. C++析构函数可虚性探究

    C++虚析构函数 析构函数是用来释放对象所申请的资源的函数. 当类内没有自定义的析构函数时,系统会自动调用默认的析构函数. 那么析构函数能否为虚函数呢? 虚函数的意义在于实现“多态性”.即:不同的个体 ...

  9. Go-Ethereum 1.7.2 结合 Mist 0.9.2 实现代币智能合约的实例

    目录 目录 1.什么是 Mist 2.Mist 在哪里下载? 3.Mist 有哪些依赖? 4.如何安装 Mist? 4.1.安装 Mist 依赖工具包 4.2.安装 Mist 4.3.启动 Mist, ...

  10. 部署 Prometheus Operator - 每天5分钟玩转 Docker 容器技术(179)

    本节在实践时使用的是 Prometheus Operator 版本 v0.14.0.由于项目开发迭代速度很快,部署方法可能会更新,必要时请参考官方文档. 下载最新源码 git clone https: ...