交互技术之AJAX

阳光穿透心脏的1/2处 2024-04-08 10:39 115阅读 0赞
  1. /*
  2. *作者:呆萌老师
  3. *☑csdn认证讲师
  4. *☑51cto高级讲师
  5. *☑腾讯课堂认证讲师
  6. *☑网易云课堂认证讲师
  7. *☑华为开发者学堂认证讲师
  8. *☑爱奇艺千人名师计划成员
  9. *在这里给大家分享技术、知识和生活
  10. *各种干货,记得关注哦!
  11. *vx:it_daimeng
  12. */

AJAX: Asynchronous Javascript And Xml (异步javascript 和xml ) 是指一种创建交互式网页应用的网页开发技术

作用: 通过在后台与服务器进行少量数据交换,ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新

传统的网页,如果需要更新内容 必须重载整个网页页面

核心对象: XMLHttpRequest

readyState的5种状态:  
 0 (未初始化)   1 (正在装载)   2 (装载完毕)   3 (交互中)   4 (完成)   
所以只有当readyState=4时,一个完整的服务器响应已经收到了,函数才可以处理该响应。

创建异步通信对象方式1:

  1. function createXMLHttp()
  2. {
  3. var request;
  4. //var browse = navigator.appName;
  5. if(window.XMLHttpRequest)
  6. {
  7. request = new XMLHttpRequest();//ie7, ie8 ,其它
  8. }
  9. else
  10. {
  11. request = new ActiveXObject("Microsoft.XMLHttp");//ie6,ie7
  12. }
  13. return request;
  14. }
  15. var xhr = createXMLHttp();

方式2:
var request=new ActiveXObject(“Msxml2.xmlhttp.3.0”);

两种传值方式:

用get方式传中文 需要用 encodeURI(username);将中文编码

  1. var a;
  2. function check()
  3. {
  4. a=new ActiveXObject("Msxml2.xmlhttp.3.0");
  5. a.open("GET","panduan.php?username="+form1.username.value,true);
  6. a.onreadystatechange=jieshou;
  7. a.send(null);
  8. }
  9. function jieshou()
  10. {
  11. if(a.readystate==4)
  12. {
  13. document.getElementById("s1").innerHTML=a.responseText;
  14. }
  15. }

用post方式传值

var a;
function check()
{
var username=form1.username.value;

a=new ActiveXObject(“Msxml2.xmlhttp.3.0”);

a.open(“POST”,”panduan.php”,true);

a.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);//必须有这句

a.onreadystatechange=jieshou;

a.send(“username=”+username);
}

function jieshou()
{
if(a.readystate==4)
{
document.getElementById(“s1”).innerHTML=a.responseText;
}
}

发表评论

表情:
评论列表 (有 0 条评论,115人围观)

还没有评论,来说两句吧...

相关阅读