ajax背景,ajax到底是什么?ajax的背景和使用介绍(附实例解析)
本篇文章主要的介绍了ajax的详情,ajax的具体含义介绍,还有唯有要用ajax的说明,现在一起来看这篇文章吧
首先我们看看什么是ajax?
常常听到ajax的大名,那么,什么是ajax呢?
1:背景介绍
首先,speak with me, 诶债克斯,别读成阿贾克斯了哦~。
AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML)。
AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。
AJAX 不需要任何浏览器插件,但需要用户允许JavaScript在浏览器上执行。
2.知识解析:
Ajax就是用 JS 发起一个请求,并得到服务器返回的内容。这跟以前的技术最大的不同点在于「页面没有刷新」,改善了用户体验,仅此而已。
那么我们如何发送一个ajax请求呢?
1. 创建一个对象 XMLHttpRequest
var xhr = new XMLHttpRequest();为了支持ie6以及更早的版本,要 var xhr=new ActiveXObject()
2.监听请求成功后的状态变化
3.设置请求参数
4.发起请求
5.操作DOM,实现动态局部刷新
而什么是一个完整的HTTP请求呢?
一个完整的请求由四部分组成
接下来,我们就要监听请求成功的状态变化了
onreadystatechange:用来监听readyState的变化的
readyState:表示当前请求的后台的状态
status:表示处理的结果
其中readyState:表示当前请求的后台的状态
0:请求未初始化(还没有调用open())
1:请求已经建立,但是还没有发送(还没有调用send())
2:请求已经发送,正在处理中
3:请求正在处理中,通常响应中已经有部分数据可以用了
4:响应已经完成,可以获取并使用服务器的响应了
而status:表示处理的结果(状态码)
1XX,表示收到请求正在处理中
status == 200 是表示处理的结果是OK的
状态码:200到300是指服务端正常返回
304:如果网页自请求者上次请求后再也没有更改过,应将服务器配置为返回此响应,进而节省带宽和开销
404:找不到对象(404 not found)
503:服务器超时
设置请求参数
xhr对象接受三个参数
1:表示请求类型
2:表示请求的网址
3:表示是否异步
get/post/put/delete
Get和post方法的区别:
get是获取数据,get的send方法的参数可以是null或者空,对发送信息有限制,一般在2000个字符,一般是用来查询(幂等)
post可以发送数据,但是在使用post方法发送数据,需要使用setRequestHeader()来添加HTTP头,同时,post的send()方法需要写入要发送的数据的值, 一般用于修改服务器上的资源,对信息数量无限制,也更安全(想看更多就到PHP中文网AJAX开发手册栏目中学习)
3常见问题
使用post提交需要忘记content-type的问题
4.解决方案xhr.open("post", "/carrots-admin-ajax/a/login",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&pwd=" + code);
Content-type要作为请求头放在open和send之间
5.编码实战var xhr = new XMLHttpRequest();
function ip() {
var name = $("#name").val();
var code = $("#code").val();
// 指定通信过程中状态改变时的回调函数
xhr.open("post", "/carrots-admin-ajax/a/login",true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("name=" + name + "&pwd=" + code);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
if (JSON.parse(xhr.responseText).code >= 0) {
window.location.href = "http://dev.admin.carrots.ptteng.com/";
} else {
$(".alert").html("该用户不存在或密码不正确");
}
}
}
};
}
$(function () {
$("#summit").click(function () {
var name = $("#name").val();
var code = $("#pwd").val();
$.ajax({
type: "POST",
url: "/carrots-admin-ajax/a/login",
data: {
"name": name,
"pwd": code
},
// beforeSend: function(xhr){xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");},
datatype:"json",
success: function (data) {
console.log(data);
if (JSON.parse(data).code==0) {
alert(JSON.parse(data).message);
}
else {
alert(JSON.parse(data).message)
}
}
})
})
});
6扩展思考
Ajax有什么优点和缺点?
参考文献
jqury ajax方法
菜鸟教程
更多讨论
1. 请求体是什么?
请求体将一个页面表单中的组件值通过param1=value1¶m2=value2的键值对形式编码成一个格式化串,它承载多个请求参数的数据。不但报文体可以传递请求参数,请求URL也可以通过类似于“/chapter15/user.html? param1=value1¶m2=value2”的方式传递请求参数。
2.xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
application/x-www-form-urlencoded代表什么意思?
form的enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded。
x-www-form-urlencoded
当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url。
3.jQuery如何设置接受的数据类型?
使用datatype:"json",里面写自己想要接受的数据类型
本篇文章到这就结束了(想看更多就到PHP中文网AJAX使用手册栏目中学习),有问题的可以在下方留言提问。
ajax背景,ajax到底是什么?ajax的背景和使用介绍(附实例解析)相关推荐
- ajax+php+jq+面向对象,php+jquery+ajax+json的一个最简单实例
html页面: $(function(){ $("#send").click(function(){ var cont = $("input").seriali ...
- ajax离开页面方法,jQuery中ajax调用当前页面方法
$.ajax({ type: 'POST', url: 'AddressManager.aspx/GetProvince',//AddressManager.aspx当前页面 data: '{cach ...
- ajax 服务端 除了echo,Ajax轮询——定时的通过Ajax查询服务端
概念:轮询(polling):客户端按规定时间定时向服务端发送ajax请求,服务器接到请求后马上返回响应信息并关闭连接. test.html //前端代码 var getting = { ur ...
- Ajax设置超时时长,jquery ajax超时设置
var ajaxTimeoutTest = $.ajax({ url:'', //请求的URL timeout : 1000, //超时时间设置,单位毫秒 type : 'get', //请求方式 ...
- flask ajax 上传 图片,flask jQuery ajax 上传文件
1.html 代码 注:1.html 部分主要是一个form表单,其中表单的enctype = "multipart/form-data" 必须要有. 2.由于我的页面背景颜色设置 ...
- ajax文章采集6,网页采集AJAX滚动教程,以新浪微博评论采集为例
网页采集AJAX滚动教程,以新浪微博评论采集为例 2019-03-17 八爪鱼7.0教程--AJAX滚动教程 标签: 新手入门,新手,v7.0 2017/6/23 18:20:20 AJAX滚动教程 ...
- ajax提交相对路径报错,ajax提交请求为啥url要用这个函数encodeURI
参考如下: 如果你是通过form提交的,那就不需要用这个了.但是如果是你使用url的方式 例如:ajax提交到后台的,就需要对url进行encodeURI编码, 否则,会导致后台出现各种乱码,不加en ...
- ajax请求json和xml数据及对json和xml格式数据的解析
ajax请求json和xml数据及对json和xml格式数据的解析 一.ajax请求json数据并解析 ajax的写法: json数据解析: 请求json经常出现的跨域报错: 二.ajax请求xml数 ...
- php ajax session失效,PHP中解决ajax请求session过期退出登录问题
1.session过期,如果直接是url请求,或者用户在打开的系统页面中直接清除缓存及cookie信息,可直接在php的入口文件中调用以下封装的方法,进行session信息判断以及页面的跳转,如: i ...
- AJAX培训第二讲:使用AJAX框架(上)
点击这里下载PDF文件. 点击这里下载示例文件. 点击这里下载视频文件. 相关内容:AJAX培训第二讲:使用AJAX框架(下) 首先向大家说声抱歉,离上次隔的时间实在太长.由于一度工作比较忙,所以录制 ...
最新文章
- shiro 没有注销再登录_Shiro 详细介绍 068
- python在哪里写程序和运行-如何编写和运行Python程序
- NSArray 简单细说
- SharePoint 服务器端对象模型操作文档库(上传/授权/查看权限)
- Java基础篇:static关键字
- 【51Nod - 1279】 扔盘子(思维)(on-p会超时)
- HDU - 5919 Sequence II
- 内核中的竞争状态和互斥(简述)
- CSU 1120 病毒
- geoserver矢量瓦片发服务前端展示偏移问题解决
- Qt4_简单的图表编辑器
- 为什么每天工作那么努力,却无法突破职场瓶颈?
- java servlet JSP 区别_servlet和jsp的区别
- VUE实现SQL在线编辑器,SQL分析器,SQL代码关键字提示
- 弯曲时空量子场论的历史与现状 (上)
- 机器学习源代码_机器学习中程序源代码的静态分析
- 深度学习-梯度爆炸原因分析、调试记录与解决方案(loss突然变为nan)
- div 和 img 标签引入图片制作背景的小问题
- win10 软路由_上网装置升级:软路由开箱体验+爱快系统体验
- 微信公众平台-小程序开发工具源码
热门文章
- 第二十章 幻读是什么,幻读有什么问题?
- 温莎大学的计算机专业,2017加拿大计算机专业前七名
- storm风暴英雄 tempo_19.4版本TempoStorm 风暴英雄天梯环境报告
- UE4-手工调整基本姿势
- 基于SSH的房屋租赁系统的设计与实现
- C# WinForm GUI之示例
- 计算机怎么设置加密文件,电脑文件夹怎么设置密码 电脑文件夹加密的3种方法...
- android连接wifi不能上网,手机wifi连接上但不能上网怎么办
- 什么是射频信号发生器?信号发生器具有哪些特点?(二)
- alpha 冲刺 —— 十分之一