博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
AJAX与Jqurey实现AJAX
阅读量:4965 次
发布时间:2019-06-12

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

AJAX = Asynchronous JavaScript and XML

(异步的 JavaScript 和 XML)。

Ajax作用:是用JavaScript向服务器发送异步请求,然后服务器给出响应,然后以XML格式的文件返回给浏览器端!

异步:当浏览器向服务器发送请求的时候,不是整个页面刷新,而是局部刷新[局部信息发送请求]!
同步:当浏览器向服务器发送请求的时候,整个页面都会刷新!

XML:一种文件格式,现在用XML这种返回格式的数据比较少了,XML解析性能较差,而且比较消耗带宽[],现在大多数都是在是使用JSON数据的返回格式!!

2.使原生js发送AJAX请求:

1).创建XMLHttpRequest对象

大部分比较新的浏览器都支持的方式(IE7以上)

var xhr = new XMLHttpRequest();
IE6以下的
var xhr = new ActiveXObject("Msxml2.XMLHTTP");
IE5.5以下的
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
通用的获取XMLHttpRequest对象的方法:
//写一个获取XHR的方法
function getXMLHttpRequest(){
try{
//大部分浏览器都支持的方式
return new XMLHttpRequest();
}catch(e){
try{
//IE6以下浏览器支持的方式
return new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
//IE5以下的浏览器
return new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
alert("你是火星来的吧!你的浏览器不支持AJAX!");
}
}
}
}

2).给open方法设置请求参数[method,url]

xhr.open(请求方式,请求地址);

在发送post请求时,还需要设置一个请求头,如下:
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

3).发送请求(send()方法)

xhr.send(请求体);

get请求没有请求体,所以send中可以传null或什么都不传。
post请求需要通过send来设置请求参数。

4.需要使用onreadystatechange回调函数监听readyState这个属性状态变化!

//xhr绑定一个onreadystatechange响应函数,这个函数会在readyState属性发生改变时调用

xhr.onreadystatechange = function(){
//判断当前readyState是否为4 , 且响应状态码为200
if(xhr.readyState==4 && xhr.status==200){
//读取响应信息,做相关操作。
//如果信息为纯文本
xhr.responseText
//如果信息为XML
xhr.responseXML
}
};

通过jQuery实现AJAX

> 使用get和getJSON都会有缓存问题,并且使用get方法不能传送较多的数据。
> post方法不会有缓存的问题,所以我们开发时使用post方法较多。
[1] post()方法
$.post(url, [data], [callback], [type])
参数:
url:发送AJAX的请求地址,字符串。
data:发送给服务器的请求参数,JSON格式。
callback:当前需要获取服务器发送的响应时,我们可以通过该回调函数。
jQuery会将响应信息以回调函数的参数的形式返回
type:响应信息的类型,字符串。一般两个常用值text、json
[2] get()方法
- get方法和post方法使用方式基本一致。
[3] getJSON()方法
getJSON(url, [data], [callback])
getJSON方法和get方法类似,只不过该方法默认的响应类型为JSON,不需要再手动指定。

 

转载于:https://www.cnblogs.com/java-ssl-xy/p/7387624.html

你可能感兴趣的文章
世界上最方便的SharePoint移动客户端--Rshare
查看>>
MongoDB要点
查看>>
字段与属性的总结与比较
查看>>
[转]Linear Depth Buffer(线性深度缓冲区)
查看>>
05最小生成树_Prim
查看>>
centos iptables
查看>>
Mysql数据库日志
查看>>
Python基础-数据类型
查看>>
unity3d 移动与旋转 2
查看>>
MyEclipse安装Freemarker插件
查看>>
php 文件下载
查看>>
寻找二叉查找树中比指定值小的所有节点中最大的那个节点
查看>>
如何设置输入框达到只读效果
查看>>
html5模拟平抛运动
查看>>
java面向对象下:Java数据库编程
查看>>
RT3070 USB WIFI 在连接socket编程过程中问题总结
查看>>
Traffic Management Gym - 101875G
查看>>
cassandra 3.x官方文档(2)---架构解析
查看>>
java -version 问题 : C:\ProgramData\Oracle\Java\javapath;
查看>>
软件架构---SOA体系
查看>>