ajax的入门了解

Ajax技术

(Asynchronous Javascript and xml ,异步的javaScript和XML,js提供的一门高级应用技术)

I.Ajax的运行原理:
页面发起请求,会将请求发送给浏览器内核的Ajax引擎,Ajax提交请求到服务器,在这段时间内,客户端
可以进行其他操作,知道服务器将数据返回给Ajax引擎后,Ajax引擎再将数据给浏览器解析

II.js的原生态Ajax
1.创建引擎对象(XMLHttpRequest)
2.编写回调函数
3.确定请求方式和请求路径(open操作)
4.发送请求(send操作)

API:
XMLHttpRequest:引擎对象
onreadystatechange:检测引擎对象的状态变化
属性:
readyState:引擎对象的状态
0:刚创建
1:执行open方法
2:执行send方法
3:部分响应已生成
4:响应已生成(我们使用)
status:响应的状态码
if(xmlhttp.readyState==4&&xmlhttp.status==200)
{
....
}
responseText:响应回来的文本

方法:
open("请求方式","请求路径"):确定请求方式和请求路径
send("[post请求的参数]"):发送请求 还可以传递pose请求的参数(发送请求参数时需要设置头xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");)

III.☆☆☆jquery中的ajax
使用:
$.get(url,[params],[fn],[type]):发送一个get请求
$.post(url,[params],[fn],[type]):发送一个post请求
参数:
url:请求的路径(servlet)
params:请求的参数 参数的形式为key/value的形式
方式1:key=value: "usrname=zhangsan&age=18"(推荐)
方式2:json方式 : {"key1":value1,"key2":value2,...}
{"username":"zhangsan","age":18,...}
fn:回调函数,响应完成并且成功之后调用的函数
function(d){函数内容} (d就是响应回来的数据)
type:返回的数据格式 (不写默认字符串)
常用的是json
注:参数的中文乱码问题:
get使用new String()方式解决
post使用request.setCharacterEncoding("utf-8")
响应的中文乱码问题:response.setContentType("text/html;charset=utf-8");

扩展:
$.ajax({选项})
常见的选项:
url:路径
data:发送的参数
type:请求的方式
success:成功的时候调用
error:错误的时候调用
async:是否异步(默认就是异步方式)

dataType:返回内容的格式,默认是字符串


浏览器和服务器之间的交互方式:
1.超链接
<a href="***"></a>
2.表单
<form action="***" ...></form>
3.替换地址栏(js的方式)
<script>
$("#bId").click(function(){
location.href="${pageContext.request.contextPath}/sd";
})
</script>
4.获取表单提交(js的方式)
<script>
$("#bId").click(function(){
$("#formId").submit();
})
</script>

5.ajax (可以页面不刷新与服务器进行数据交互)

<script>
$(function(){
$("#username").blur(function(){
var url="${pageContext.request.contextPath}/sd1";
var params="username="+$("#username").val();
$.post(url,params,function(d){
$("#spanId").html("***").css("color","red");
});
})
})
</script>

ps (了解):
同步和异步:客户端发送请求到服务器端,当服务器返回响应之前,客户端处于等待状态,不能进行其他操作
同步:客户端发送请求到服务器端,无论服务器是否返回相应,客户端都可以做其他任何事情

json:
一种轻量级的数据交换格式
第一种格式:
对象格式:key/value的形式,value可以为任意类型
{"key1":value1,"key2":value2,...} 获取方式: 对象.属性
第二张格式:
数组格式:["abc",123,new User(),map,list,...] 获取方式:数组角标

使用时要导入jsonlib的工具包,可以在servlet中进行java数据和json数据之间的转换
JSONArray.fromObject(数组|list) 转换成json的数组格式
JSONObject.fromObject(javaBean|map) 转换成json的对象格式

原文地址:https://www.cnblogs.com/zbdouble/p/8414397.html