ajax对象.open(方式get/post,url地址,[异步true]/同步 false);
ajax是可以与服务器进行(异步或同步)交互的技术之一
异步:同一个时间点允许执行多个进程。
同步:同一个时间点只允许执行一个进程。
例1 ajax异步编程
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
<meta charset="UTF-8">
<script type="text/javascript">
/*function checkname(){
var nm=document.getElementById('username').value;
//把传递给服务器端的数据组织为请求字符串
var info='name='+nm+'&color=yellow';*/
//建立Ajax对象
var xhr=new XMLHttpRequest();
//创建一个新的http请求,并设置请求的一个服务器端的地址,
//对象.open(请求方式get/post方式,url地址);
xhr.onreadystatechange=function(){
//获得readyState状态变化信息
//console.log(xhr.readyState);
//要随时感知ajax的变化
/*onreadystatechange是ajax的一个事件,在readyState状态发生变化的时候被触发,
为了感知最多的状态信息,要设置在对象创建完毕之后*/
if(xhr.readyState==4){
console.log(1111);
//document.getElementById('result').innerHTML=xhr.responseText;
}
}
xhr.open('GET','./ajax_07.php');
//发送http请求
xhr.send(null);
//建立Ajax对象
var xhr1=new XMLHttpRequest();
xhr1.onreadystatechange=function(){
//获得readyState状态变化信息
//console.log(xhr.readyState);
//要随时感知ajax的变化
/*onreadystatechange是ajax的一个事件,在readyState状态发生变化的时候被触发,
为了感知最多的状态信息,要设置在对象创建完毕之后*/
if(xhr1.readyState==4){
console.log(2222);
//document.getElementById('result').innerHTML=xhr.responseText;
}
}
xhr1.open('GET','./ajax_07.php');
//发送http请求
xhr1.send(null);
</script>
<style type="text/css"></style>
</head>
<body>
<h2>POST请求(ajax用户校验)</h2>
</body>
</html>
php代码:
<?php
echo"Tuesday";
?>
输出结果如图所示:
例2 把上面例1改为同步请求
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>simple document</title>
<meta charset="UTF-8">
<script type="text/javascript">
/*function checkname(){
var nm=document.getElementById('username').value;
//把传递给服务器端的数据组织为请求字符串
var info='name='+nm+'&color=yellow';*/
//建立Ajax对象
var xhr=new XMLHttpRequest();
//创建一个新的http请求,并设置请求的一个服务器端的地址,
//对象.open(请求方式get/post方式,url地址);
xhr.onreadystatechange=function(){
//获得readyState状态变化信息
//console.log(xhr.readyState);
//要随时感知ajax的变化
/*onreadystatechange是ajax的一个事件,在readyState状态发生变化的时候被触发,
为了感知最多的状态信息,要设置在对象创建完毕之后*/
if(xhr.readyState==4){
console.log(1111);
//document.getElementById('result').innerHTML=xhr.responseText;
}
}
xhr.open('GET','./ajax_07.php',false);//同步请求
//发送http请求
xhr.send(null);
//建立Ajax对象
var xhr1=new XMLHttpRequest();
xhr1.onreadystatechange=function(){
//获得readyState状态变化信息
//console.log(xhr.readyState);
//要随时感知ajax的变化
/*onreadystatechange是ajax的一个事件,在readyState状态发生变化的时候被触发,
为了感知最多的状态信息,要设置在对象创建完毕之后*/
if(xhr1.readyState==4){
console.log(2222);
//document.getElementById('result').innerHTML=xhr.responseText;
}
}
xhr1.open('GET','./ajax_07.php');
//发送http请求
xhr1.send(null);
</script>
<style type="text/css"></style>
</head>
<body>
<h2>POST请求(ajax用户校验)</h2>
</body>
</html>