笔记·AJAX
河城凌风(kawashiro-ryofu) Lv5

不建议直接搬用本文代码,因为很有可能出现跨域问题

AJAX是什么

AJAX - Asynchronous JavaScript And XML - 异步的JavaScript和XML

该方法能够让Web浏览器在不刷新页面的情况下与服务器交换数据。

当使用结合了这些技术的AJAX模型以后, 网页应用能够快速地将增量更新呈现在用户界面上,而不需要重载(刷新)整个页面。这使得程序能够更快地回应用户的操作。

XMLHttpRequest

XMLHttpRequest()用于和服务器交换数据。

发送一个HTTP请求时,需要创建一个XMLHttpRequest对象,打开一个URL,发送请求。服务器会返回HTTP状态码及响应主体。

1
var NewHTTPRequest = new XMLHTTPRequest();

这样就创建了一个XMLHttpRequest对象。(废话

值得一提的是,IE6及以前版本的IE用的都是ActiveXObject0202年了,还有人用IE6吗?

发送请求

使用XMLHttpRequest对象的open()send()方法。

1
2
NewHTTPRequest.open("GET","https://kawashiro_ryofu.gitee.io/blogimagerc/index.html",true)
NewHTTPRequest.send();

open()方法

语法:XMLHttpRequestObject.open(method, url, async, user, passwd);

  • XMLHttpRequestObject: 创建的XMLHttpRequest对象
  • method: 要使用的HTTP方法。常用的是GETPOST
  • url: 要向其发送请求的URL
  • async: 可选参数。布尔类型。表示是否异步操作,默认为true。如果为falsesend()方法直到收到答复前不会返回
  • user: 可选参数。用于认证用途,用户名
  • passwd: 可选参数。用于认证用途,密码

send()方法

语法:XMLHttpRequestObject.send(body);

  • body: 可选参数。在XMLHttpRequest请求中要发送的数据体,默认为null。仅用于POST请求

GET还是POST

一言蔽之,GET适用于大多数请求。

而以下情况:

  • 无法使用缓存文件(更新服务器上的文件或数据库)
  • 向服务器发送大量数据(POST没有数量限制)
  • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

GET

1
2
NewHTTPRequest.open("GET","https://kawashiro_ryofu.gitee.io/blogimagerc/index.html",true);
NewHTTPRequest.send();

执行上面的例子,浏览器可能返回缓存的数据。

简单粗暴的解决方案:

1
2
NewHTTPRequest.open("GET","https://kawashiro_ryofu.gitee.io/blogimagerc/index.html?t=" + Math.random(),true);
NewHTTPRequest.send();

只需要向URL中添加一个无用的参数就可以了。

POST

1
2
3
NewHTTPRequest.open("POST","https://www.runoob.com/try/ajax/demo_post2.php" + Math.random(),true);
NewHTTPRequest.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //向请求添加HTTP头
NewHTTPRequest.send("fname=河城&lname=荷取") //参数

setRequestHeader参数:

  • header: 规定HTTP头的名称
  • value: 规定头的值

异步还是同步

多数情况下,async应设置为true。但有时,async=false更合适。

对于 web 开发人员来说,发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前,这可能会引起应用程序挂起或停止。

通过 AJAX,JavaScript 无需等待服务器的响应,而是:

  1. 在等待服务器响应时执行其他脚本
  2. 当响应就绪后对响应进行处理

    ——Runoob.com

服务器响应

接收服务器响应数据,应使用responseTextresponseXML属性。二者的区别在于,前者默认获得文本数据,后者会解析XML。

responseText

1
console.log(NewHTTPRequest.responseText)

responseXML

什么时候推出一个“responseJson”啊

1
2
3
4
5
6
7
8
9
10

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{
txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

参考

 评论
评论插件加载失败
正在加载评论插件