<强> AJAX教程
AJAX(异步JavaScript和XML(异步的JavaScript和XML)。
在应用时主要是创建XMLHttpRequest对象,调用指定服务地址。
但是IE中各个版本支持的不太一样,所以在创建次对象时可能要特殊处理下。
一般如下:
函数createXMLHttpRequest () {
var xmlhttp;
尝试{
xmlhttp=new XMLHttpRequest ();//ie7及以上,其他浏览器
}捕捉(e) {
尝试{
xmlhttp=new ActiveXObject (Msxml2.XMLHTTP ");//ie6
}捕捉(e) {
尝试{
xmlhttp=new ActiveXObject (Microsoft.XMLHTTP ");//ie6以下
}捕捉(e) {
把“创建AJAX对象失败!”;
}
}
}
返回xmlhttp;
}
var xmlhttp=createXMLHttpRequest ();
xmlhttp.open(“获得”、“http://localhost: 8080/SimpleBlog/AjaxTest”,真正的);
xmlhttp.send(空);
xmlhttp。onreadystatechange=function(结果){
如果(xmlhttp。readyState==4,,xmlhttp。状态==200){
改变(result.test);
}
};
但是浏览器再执行javascript代码时,有个著名的同源策略,这使得跨域请求就不是那么方便了。
<强>那一般都是用什么方式支持跨域呢?
1,通过中间代理服务器,获取要跨域请求的数据。
2,通过iframe内嵌带请求域的页面,来解决跨域访问问题。
3,通过jsonp方式。
4,不过现在已经提出了XMLHttpRequest二级(XHR2)允许跨域请求,不过要在服务器的返回头中显示声明允许跨域请求(浏览器的支持情况:http://caniuse.com/壮举=XHR2)。
<强>下面简单说下jsonp与xtr2。
jsonp:
jsonp简单的说就是利用& lt; script>标签来实现跨域请求的调用,因为浏览器中脚本的加载是不受同源策略影响的。
函数得到(){
var url=' http://localhost: 8080/SimpleBlog AjaxTest& # 63;调=回调';
var=document.createElement脚本(脚本);
script.setAttribute(“类型”、“text/javascript”);
脚本。src=https://www.yisu.com/zixun/url;
document.body.appendChild(脚本);
}
回调函数(va) {
警报(va.test);
}
服务端(java):
布尔jsonP=false;
字符串cb=this.request.getParameter(“回调”);
如果(cb !=null) {
jsonP=true;
response.setContentType (" text/javascript ");
其他}{
response.setContentType(“应用程序/x-json”);
}
PrintWriter=response.getWriter ();
如果(jsonP) {
尝试{
出去了。println (cb +”({\“测试\”:\“1 \”})");
out.flush ();
out.close ();
}捕捉(异常e) {
把e;
}
}
这样就可以实现跨域调用了。
而我们经常用的jquery已经实现了此类方式的封装,使用起来更简单。
美元(文档)。准备好(函数(){
$ (" # jqueryajax”)。绑定(“点击”,函数(){
. ajax({美元
类型:“得到”,
异步:假的,
url: http://localhost: 8080/SimpleBlog/AjaxTest1,
数据类型:“jsonp”,
jsonp:“回调”,
成功:函数(json) {
警报(json.result);
}，
错误:函数(){
alert('失败');
}
});
});
});
服务端(java):
我用了struts是这样写的:
公开课AjaxTest1延伸ActionSupport {
私人字符串的结果;
公共字符串getResult () {
返回结果;
}
公共字符串execute () {
这一点。结果=?”;
返回“jqueryajax”;
}
}
配置文件:
& lt;动作名称=癆jaxTest1”class=癆jaxTest1”比;
& lt;结果名称=" jqueryajax " type=" json "比;
& lt;参数name=" callbackParameter祝辞callback
& lt;/result>
& lt;/action>
下面说说xtr2:
这个就更简单了,直接创建调用即可。
函数createCORSRequest(方法、url) {
var xhr=new XMLHttpRequest ();
如果(withCredentials xhr) {
xhr.open(方法、url、真实);
}else if (typeof XDomainRequest !=岸ㄒ濉?{
xhr=new XDomainRequest ();
xhr.open(方法、url);
其他}{
xhr=零;
}
返回xhr;
}
函数xhr2 () {
var请求=createCORSRequest(“得到”,http://localhost: 8080/SimpleBlog/AjaxTest1);
如果(请求){
request.onload=function () {
警报(request.responseText);
}
request.onerror=function (e) {
alert('错误');
}
request.send ();
}
}
