简单了解AJAX

最新推荐文章于 2024-08-19 15:26:06 发布

nqxcwl

最新推荐文章于 2024-08-19 15:26:06 发布

阅读量114

点赞数

分类专栏：前端文章标签： javascript ajax的二个版本

原文链接：https://www.mk2048.com/blog/blog.php?id=h1a2jh01cbaa&title=%E7%AE%80%E5%8D%95%E4%BA%86%E8%A7%A3AJAX

版权

前端专栏收录该内容

241 篇文章 0 订阅

订阅专栏

// ajax的俩个版本：

　　var xmlhttp;

　　if(window.xmlHttpRequest){
　　　　xmlhttp = new xmlHttpRequest();
　　}else{
　　　　xmlhttp = new Activexobjext("Microsoft.xmlhttp");
　　}

// 向服务器发送请求：
　　xmlhttp.open(method,url,asyns);
　　/*
　　　　method: 请求类型（get和post）
　　　　url: 文件在服务器上的位置
　　　　async: 是否同步（true同步或false异步）
　　*/
　　xmlhttp.send(string);
　　/*
　　　　string: 仅用于post请求
　　*/
// 实例：页面加载，获取信息
　　HTML的内容:
　　　　<body>
　　　　　　<div id="box"></div>
　　　　</body>

　　JS的内容:
　　　　$.ajax({
　　　　　　type: "POST",　　　　　　　　//请求方式
　　　　　　url: "地址", 　　　　　　　　 //就是JSON文件的请求路径
　　　　　　dataType: "JSON",　　　　　 //请求的文件类型：有text,xml.json,script.jsonp
　　　　　　success:function(result){ 　　//返回的参数是active里面所有get和set方法的参数
　　　　　　　　addBox(result);
　　　　　　}
　　　　});
　　　　function addBox(result){
　　　　　　$.each(result,function(index,obj){
　　　　　　　　$("#box").append("<div class='product'>"
　　　　　　　　"<div><img class='img' src=" obj['url'] "/></div>"
　　　　　　　　"<div class='p1 p'>" obj['name'] "</div>"
　　　　　　　　"<div class='p2 p'>" obj['sex'] "</div>"
　　　　　　　　"<div class='p3 p'>" obj['email'] "</div>"
　　　　　　　　"</div>");
　　　　　　});
　　　　}