大家好,又见面了,我是你们的朋友全栈君。
AJAX:Asynchronous Javascript And XML,所以说,AJAX就是指异步的JavaScript和XML。
对比AJAX和传统网页
传统的网页如果需要更新内容,必须重载整个网页。
AJAX:使用了AJAX技术后,可以在后台和服务器进行少量的数据交换,使网页实现异步更新。也就是可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
AJAX的核心是JavaScript和XMLHttpRequest,XMLHttpRequest使用户通过JavaScript向服务器提出请求并处理响应。
创建XMLHttpRequest对象的步骤:
1.建立XMLHttpRequest对象
2.注册回调函数
3.使用open方法设置和服务器端交互的基本信息
4.设置发送的数据,开始和服务器端交互
5.在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面内容
具体代码:
<span style="font-family:KaiTi_GB2312;font-size:18px;">function submit() {
//1.创建XMLHttpRequest
if (window.XMLHttpRequest) {
//IE7,IE8,FireFox,Morilla,Safari,Opera
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
}else if (window.ActiveXObject) {
//IE6,IE5
var activexName = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0", "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP", "Miscrosoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try {
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
if (xmlhttp==undefined||xmlhttp==null) {
alert("当前浏览器不支持创建XMLHttpRequest对象,请更换浏览器");
return;
}
//2.注册回调方法
xmlhttp.onreadystatechange = callback;
//记忆一个固定用法,获取文本框中用户输入的内容
var userName = document.getElementById("UserName").value;
//3.设置和服务器端交互的相应参数
//使用get方式异步交互
xmlhttp.open("GET", "AJAX?name=" + userName, true);
//4.设置向服务器端发送的数据,启动和服务器端的交互
xmlhttp.send(null);
3.post方式设置和服务器端交互的相应参数
//xmlhttp.open("POST", "AJAX", true)
//xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
4.设置向服务器端发送的数据,启动和服务器端的交互
//xmlhttp.send("name"+userName);
//回调方法
function callback() {
//5.判断和服务器端的交互是否完成,服务器端是否正确返回了数据
if (xmlhttp.readyState==4) {
//表示和服务器端的交互已经完成
if (xmlhttp.status==200) {
//表示服务器的相应代码是200,正确返回了数据
var message = xmlhttp.responseText;
//记忆向div标签中填充文本内容的方法
var div = document.getElementById("message");
div.innerHTML = message;
}
}
}
}</span>
AJAX技术为我们编写网页提供了一种新思路。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/105741.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...