Ajax技术总结
程序员文章站
2022-06-22 11:40:29
目录javascript的Ajax$.ajaxJSON与xml相同之处与 XML 不同之处$.get$.post$.getJSON后台为了实现页面的异步提交和局部刷新,在这就可以使用Ajax技术,减少资源损耗,提高用户体验。Ajax是通过javascript的XMLHttpRequest对象向服务器发送请求,服务器响应所需的数据,通过javascript动......
目录
为了实现页面的异步提交和局部刷新,在这就可以使用Ajax技术,减少资源损耗,提高用户体验。
Ajax是通过javascript的XMLHttpRequest对象向服务器发送请求,服务器响应所需的数据,通过javascript动态刷新页面。
javascript的Ajax
//首先要判断是浏览器版本,做不同的实例化
if(window.XMLHttpRequest){
var xhr=new XMLHttpRequest();
}else{
var xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
//声明回调函数,指定url和提交方式等
xhr.onreadystatechange=callBack;
var url="myServlet";
xhr.open("POST",url,true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设定要传输的数据,调用回调函数
var data="name=zhangshuo";
xhr.send(data);
function callBack(){
if(xhr.readystate==4&&xmlHttpRequest.status==200){
var backdata=xhr.responseText;
}
}
以上是javascript原生支持的Ajax,配置了很多东西,可是有很多是固定代码,很少有人使用。
$.ajax
下面是jQuery支持的Ajax
var data = 'name=zhangshuo&age=18';
$.ajax({
url: 'myServlet',
type: 'POST',
data: data,
success: function (rs) {
$('div').html(rs);
}
});
代码量大大减少,实现的是同样功能,只需要配置必要的参数。
参数表:
async | 布尔值,表示请求是否异步处理。默认是 true。 |
beforeSend(xhr) | 发送请求前运行的函数。 |
cache | 布尔值,表示浏览器是否缓存被请求页面。默认是 true。 |
complete(xhr,status) | 请求完成时运行的函数(在请求成功或失败之后均调用,即在 success 和 error 函数之后)。 |
contentType | 发送数据到服务器时所使用的内容类型。默认是:"application/x-www-form-urlencoded"。 |
context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
data | 规定要发送到服务器的数据。 |
dataFilter(data,type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
dataType | 预期的服务器响应的数据类型。 |
error(xhr,status,error) | 如果请求失败要运行的函数。 |
global | 布尔值,规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
ifModified | 布尔值,规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
password | 规定在 HTTP 访问认证请求中使用的密码。 |
processData | 布尔值,规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
scriptCharset | 规定请求的字符集。 |
success(result,status,xhr) | 当请求成功时运行的函数。 |
timeout | 设置本地的请求超时时间(以毫秒计)。 |
traditional | 布尔值,规定是否使用参数序列化的传统样式。 |
type | 规定请求的类型(GET 或 POST)。 |
url | 规定发送请求的 URL。默认是当前页面。 |
username | 规定在 HTTP 访问认证请求中使用的用户名。 |
xhr | 用于创建 XMLHttpRequest 对象的函数。 |
JSON
JSON: JavaScript Object Notation(JavaScript 对象表示法)
JSON 是存储和交换文本信息的语法。类似 XML。
JSON 比 XML 更小、更快,更易解析。
JSON对象
var haoren={
"name":"zs",
"age":"18",
"sex":"male"
};
var people=[
{"name":"zs", "age":"18", "sex":"male"},
{"name":"hh", "age":"24", "sex":"male"},
{"name":"abb", "age":"15", "sex":"female"}
];
与xml相同之处
JSON 是纯文本
JSON 具有"自我描述性"(人类可读)
JSON 具有层级结构(值中存在值)
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输
与 XML 不同之处
没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字
直接传过来的JSON需要转成javascript对象
jsonobj = eval('(' + json + ')');
var data = 'name=zhangshuo&age=18';
$.ajax({
url: 'myServlet',
type: 'POST',
data: data,
dataType:json,
success: function (rs) {
$('div').html(rs);
}
});
$.get
var data = 'name=zhangshuo&age=18';
$.get('myServlet',data,function (jsom) {
$('div').html(jsom.name);
});
$.post
var data = 'name=zhangshuo&age=18';
$.post('myServlet',data,function (jsom) {
$('div').html(jsom.name);
});
$.getJSON
var data="name=zhangshuo&age=18";
$.getJSON('myServlet',data,function (json) {
$('div').html(jsom.name);
})
后台
request.getParameter("name");
request.getParameter("age");
//中间写自己的代码
String zsjson= JSONObject.toJSONString(zsobj);
response.getWriter().write(zsjson);
本文地址:https://blog.csdn.net/DT_Zhangshuo/article/details/85986635
上一篇: 如何用Anaconda搭建虚拟环境并创建Django项目
下一篇: 洛谷