AJAX基础笔记

最新推荐文章于 2024-04-18 23:34:36 发布

qq_38817921

最新推荐文章于 2024-04-18 23:34:36 发布

阅读量72

点赞数 1

分类专栏： java 学习笔记

java 学习笔记专栏收录该内容

1 篇文章 0 订阅

订阅专栏

笔记摘自W3Cschool手册

AJAX（异步的JavaScript的和XML）

AJAX指的是异步的JavaScript的XML和，通过在后台服务器进行少量数据交换，AJAX可以实现网页异步更新，也就是说，可以在不重新加载整个页面的情况下，对网页进行部分更新。传统网页需要重载整个页面。

一，JavaScript的AJAX的的的

1. XMLHttpRequest对象是AJAX的基础

var xmlhttp = new XMLHttpRequest（）; //适用所有现代浏览器

xmlhttp = new ActiveXObject（“Microsoft.XMLHTTP”）; //老版本的Internet Explorer（IE5和IE6）使用ActiveX对象

将请求发送到服务器的方法：

GET请求示例

<html>
<head>
<script type="text/javascript">
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)//检查浏览器是否支持 XMLHttpRequest 对象
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {//如果不支持，则创建 ActiveXObject 
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","../ajax/demo_get.asp",true);
xmlhttp.send();
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

GET还是POST？

与POST相比，GET更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用POST请求：

无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST没有数据量限制）
发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

的的的XMLHttpRequest的属性

JQuery的AJAX的的

jQuery $ .get（url，callback）

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $.get("../example/jquery/demo_test.asp",function(data,status){
      alert("数据：" + data + "\n状态：" + status);
    });
  });
});
</script>
</head>
<body>

<button>向页面发送 HTTP GET 请求，然后获得返回的结果</button>

</body>
</html>

$ .get（）的第一个参数是我们希望请求的URL（“demo_test.asp”）。

第二个参数是回调函数。第一个回调参数存有被请求页面的内容，第二个回调参数存有请求的状态。

jQuery。$ post（URL，data，callback）;

必需的URL参数规定您希望请求的URL。

的可选数据参数规定连同请求发送的数据。

的可选回调参数的英文请求成功后所执行的函数名。

$("button").click(function(){
  $.post("demo_test_post.asp",
  {
    name:"Donald Duck",
    city:"Duckburg"
  },
  function(data,status){
    alert("Data: " + data + "\nStatus: " + status);
  });
});

1. $ .get（url，[data]，[callback]，[type]）

2. $ .post（url，[data]，[callback]，[type]）

其中：

url：代表请求的服务器端地址

data：代表请求服务器端的数据（可以是键=值形式也可以是JSON格式）

callback：表示服务器端成功响应所触发的函数（只有正常成功返回才执行）

type：表示服务器端返回的数据类型（jquery的的会根据指定的类型自动类型转换）

常用的返回类型：text，JSON，HTML等

3. $ .ajax（{option1：value1，option2：value2 ...}）;

常用的选项有如下：

asycn：是否异步，默认是true代表异步

data：发送到服务器的参数，建议使用JSON格式

dataType：服务器端返回的数据类型，常用的text和JSON

success：成功响应执行的函数，对应的类型是function类型

type：请求方式，POST / GET

url：请求服务器端地址

qq_38817921

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX基础笔记

笔记摘自W3Cschool手册AJAX（异步的JavaScript的和XML）AJAX指的是异步的JavaScript的XML和，通过在后台服务器进行少量数据交换，AJAX可以实现网页异步更新，也就是说，可以在不重新加载整个页面的情况下，对网页进行部分更新。传统网页需要重载整个页面。一，JavaScript的AJAX的的的1. XMLHttpRequest对象是AJAX的基础...
复制链接

扫一扫