Ajax同步,异步请求

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>


最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容