jQuery AJAX应用实例总结

本文实例总结了jQuery AJAX应用。分享给大家供大家参考，具体如下：

AJAX

是指一种创建交互式网页应用的网页开发技术。

AJAX=异步JavaScript和XML（标准通用标记语言的子集）。

AJAX是一种用于创建快速动态网页的技术。

AJAX是一种在无需重新加载整个网页的情况下，能够更新部份网页的技术。

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

AJAX解析纯文本数据

<script>
 $(document).ready(function() {
  //获取页面中所有a元素中的第一个，并添加点击事件
  document.getElementByTagName('a')[0].οnclick=function() {
   //1、获取XHR对象
   var request = new XMLHttpRequest();
   //2、配置AJAX请求参数：请求类型，请求的URL资源，请求方式，默认为true，即异步
   request.open('GET','URL',true);
   request.open('GET',this.href+'?'+(new Date()),true);//每次请求都是最新数据
   //3、将AJAX请求发送到服务器，GET请求不需要参数，可以传空或null
   request.send();
   //4、AJAX对象的事件属性onreadystatechange，不断监听服务器端的响应
   request.onreadystatechange = function() {
    //当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据
    if (request.readyState == 4 && request.status == 200) {
     //根据数据类型，更新当前页面中的DOM节点信息
     document.getElementByTagName('h3')[0].innerHTML=request.responseText;
    }
   };
   return false;//取消a元素的默认点击行为
  };
 });
</script>
<body>
 <a href=''></a>
 <h3></h3>
</body>

AJAX访问html文件

<script>
 $(document).ready(function() {
  //获取页面中所有a元素，并添加点击事件
  var aNodes = getElementByTagName('a');
  //获取当前页面需要更新的DOM节点
  var content = getElementById('content');
  //给所有a元素添加点击事件，每个链接都会访问到一个不同的html文件
  for (var i=0;i<aNodes.length;i++) {
   aNodes[i].onclick = function {
    //1、获取XHR对象
   var request = new XMLHttpRequest();
   //2、配置AJAX请求参数：请求类型，请求的URL资源，请求方式，默认为true，即异步
   //request.open('GET','URL',true);
   request.open('GET',this.href+'?'+(new Date()),true);//每次请求都是最新数据
   //3、将AJAX请求发送到服务器，GET请求不需要参数，可以传空或null
   request.send();
   //4、AJAX对象的事件属性onreadystatechange，不断监听服务器端的响应
   request.onreadystatechange = function() {
    //当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据
    if (request.readyState == 4 && request.status == 200) {
     //根据数据类型，更新当前页面中的DOM节点信息
     document.getElementByTagName('h3')[0].innerHTML=request.responseText;
   }
   return false;//取消a元素的默认点击行为 
  }
  };
 });
</script>
<body>
 <a href='1.html'></a>
 <a href='2.html'></a>
 <a href='3.html'></a>
 <div id='content'></div>
</body>

AJAX访问XML格式数据

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>AJAX---xml</title>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
 $(document).ready(function() {
  //获取页面中所有a元素中的第一个，并添加点击事件
  document.getElementsByTagName('a')[0].οnclick=function() {
   //1、获取XHR对象
   var request = new XMLHttpRequest();
   //2、配置AJAX请求参数：请求类型，请求的URL资源，请求方式，默认为true，即异步
   // request.open('GET','URL',true);
   request.open('GET',this.href+'?='+(new Date()),true);//每次请求都是最新数据
   //3、将AJAX请求发送到服务器，GET请求不需要参数，可以传空或null
   request.send();
   //4、AJAX对象的事件属性onreadystatechange，不断监听服务器端的响应
   request.onreadystatechange = function() {
    //当请求状态为4，且响应码为200时，表示服务器响应成功，并返回了用户数据
    if (request.readyState == 4 && request.status == 200) {
     var result = request.responseXML;
      //解析当前XML文件中的每个节点数据，保存到对应变量中，XML支持所有DOM操作
     var name = result.getElementsByTagName('name')[0].childNodes[0].nodeValue;
     var age = result.getElementsByTagName('age')[0].childNodes[0].nodeValue;
     var job = result.getElementsByTagName('job')[0].childNodes[0].nodeValue;
     //根据数据类型，更新当前页面中的DOM节点信息
     document.getElementById('name').innerHTML=name;
     document.getElementById('age').innerHTML=age;
     document.getElementById('job').innerHTML=job;
    }
   };
   return false;//取消a元素的默认点击行为
  };
 });
 </script>
</head>
<body>
 <a href="1.xml" rel="external nofollow" >我的信息</a>
 <div>
  <p id='name'></p>
  <p id='age'></p>
  <p id='job'></p>
 </div>
</body>
</html>

xml文件：

<?xml version="1.0" encoding="UTF-8" ?>
<info>
 <name>Zhang</name>
 <age>28</age>
 <job>php</job>
</info>

AJAX访问JSON格式数据

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>JSON</title>
 <script src="jQuery/jquery-1.8.3.js"></script>
 <script type="text/javascript">
  $(document).ready(function() {
   document.getElementById('btn').onclick = function(event) {
    //第一种
    var data = {
     'name':'zhang',
     'age':'28',
     'hobby':['跑步','睡觉'],
     'job':{
      'php':'Mysql',
      'html':'jQuery'
     }
    };
    //第二种
    var json = '{\
     "name":"zhang",\
     "age":"28",\
     "hobby":["跑步","睡觉"],\
     "job":{\
      "php":"Mysql",\
      "html":"jQuery",\
     }\
    }';
    var data = eval('('+json+')');
    document.getElementById('name').innerHTML=data.name;
    document.getElementById('age').innerHTML=data.age;
    document.getElementById('hobby').innerHTML=data.hobby[1];
    document.getElementById('job').innerHTML=data.job.php;
    //第三种
    var request = new XMLHttpRequest;
    request.open('GET','demo.json',true);
    request.send(null);
    request.onreadystatechange = function() {
     if (request.readyState==4 && request.status==200) {
      var data = JSON.parse(request.responseText);
      document.getElementById('name').innerHTML=data.name;
      document.getElementById('age').innerHTML=data.age;
      document.getElementById('hobby').innerHTML=data.hobby[1];
      document.getElementById('job').innerHTML=data.job.php;
     }
    }
   }
  });
 </script>
</head>
<body>
 <button type="button" name="button" id="btn">我的信息</button>
 <p id="name"></p>
 <p id="age"></p>
 <p id="hobby"></p>
 <p id="job"></p>
</body>
</html>

AJAX访问中的$.ajax()函数

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>$.ajax()</title>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
  $(function() {
   $('#btn').click(function() {
    $.ajax({
     type:'GET',//http的请求方法
     url:'demo.json',//要获取数据的URL
     data:null,//不给URL添加任何数据
     dataType:'json',//将获取到的数据当作JSON类型处理
     success:function(data) {//完成时调用
      $('#name').text(data.name);
      $('#age').text(data.age);
      $('#hobby').text(data.hobby[1]);
      $('#job').text(data.job.php);
     },
     error:function(data) {//失败时调用
      alert('获取失败！');
     }
    });
   });
  });
 </script>
</head>
<body>
 <button type="button" name="button" id="btn">我的信息</button>
 <p id="name"></p>
 <p id="age"></p>
 <p id="hobby"></p>
 <p id="job"></p>
</body>
</html>

AJAX访问中的load()方法

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>get</title>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
<script type='text/javascript'>
 $(function() {
  $('button').click(function() {
   //1、获取纯文本文件的内容
   $('div').load('hello.txt');
 
   //2、获取html文件的内容，可以使用jquery选择器，按需获取
   $('div').load('hello.html');//获取html文件全部内容
   $('div').load('hello.html li:first','?'+(new Date()));//获取第一个li的内容
   $('div').load('hello.html li:eq(2)');/获取索引为2的li内容
   $('div').load('hello.html li:odd','?'+(new Date()));//获取全部li中索引为奇数的内容
   //3、获取XML中的数据，与访问HTML一样，也可以使用选择器
   $('div').load('1.xml');//返回xml,全部同行显示
   $('div').load('1.xml work');//显示指定标签名的数据
   $('div').load('1.xml work',function() {
    $(this).css('color','red');
   });//可以使用回调函数
   
   //4、获取JSON数据，json不能直接使用，必须通过回调函数来进行解析后再使用
   $('div').load('demo.json',function(data) {
    //将获取到的json字符串解析为js对象
    var jsonObj = JSON.parse(data);
    $(this).empty()
    $(this).append('<p>姓名：<span>'+jsonObj.name"'</span></p>')
   });
  });
 });
 </script>
</head>
<body>
 <button type="button" name="button">测试</button>
 <div id="con"></div>
</body>
</html>

AJAX访问中的$.get()方法

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>get</title>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
  $(function() {
   $('button').click(function(event) {
    //1、从服务器中返回纯文本或html
    $.get('1.php',function(data) {
     $('#con').html(data);
    });
    //2、服务器返回XML格式数据
    $.get('1.php',function(data) {
     //将XML数据转为jQuery对象，并获取内部的数据
     var name = $(data).children('name').text();
     //将解析出的数据拼接成需要显示的html代码
     var html = '<p>'+name+'</p>';
     //将html代码插入到指定节点
     $('#con').html(html);
    });
    //3、服务器返回JSON格式数据
    $.get('1.php',function(data) {
     var jsonObj = JSON.parse(data);//返回一个JSON格式字符串，需要先解析成JS对象
     $('#con').empty().append('<p>姓名:'+jsonObj.name+'</p>');
    });
   });
  });
 </script>
</head>
<body>
 <button type="button" name="button">测试</button>
 <div id="con"></div>
</body>
</html>

1.php:

<?php
 echo 'hello world!';//纯文本
 
//XML格式数据
echo <<<'XML'
 <?xml version="1.0" encoding="UTF-8" ?>
 <info>
  <name>Zhang</name>
  <age>28</age>
  <job>php</job>
 </info>
XML;
 
//JSON格式数据
echo '{"name":"zhang","age":"28","hobby":["跑步","睡觉"],"job":{"php":"Mysql","html":"jQuery"}}';
?>

AJAX中的$.getJSON()函数

<script>
 $.getJson('1.php',function(data) {
  $('#con').empty().append('<p>姓名:'+data.name+'</p>');
 });
</script>

AJAX中的$.post()方法

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>post</title>
 <script src="jQuery/jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
  $(function() {
   $('#name').change(function(event) {
    $.post(
     'check.php',
     {
      'name':$(this).val()
     },
     function(data) {
      console.log(data);
      $('#name').next().empty();
      $('#name').after(data);
     }
    );
   });
 
   $('#sub').click(function(event) {
    var name = $('#name').val();
    if ('' == name && null == name) {
      $('#name').after('<span>用户名不能为空</span>');
      return false;
     }
   });
  });
 </script>
</head>
<body>
 <form action="" method="post">
  姓名：<input type="text" name="name" value='' id='name'><br/>
  密码：<input type="password" name="password" value="" id='ps'><br>
  <input type="submit" name="" value='提交' id='sub'>
  <input type="reset" name="">
 </form>
</body>
</html>

check.php

<?php
$info = $_POST;
 
$name = isset($info['name']) ? $info['name'] : '';
$arr_name = ['zhang','li'];
if (!empty($name) && in_array($name, $arr_name)) {
 echo '<script>alert("名称已存在");window.history.back(-1);</script>';
} elseif (empty($name)) {
 echo '<script>alert("不可为空");window.history.back(-1);</script>';
} else {
 echo '<span style="color:blue">名称可用</span>';
}
?>

更多关于jQuery相关内容可查看本站专题：《jquery中Ajax用法总结》、《jQuery扩展技巧总结》、《jQuery常用插件及用法总结》、《jQuery常见经典特效汇总》及《jquery选择器用法总结》

希望本文所述对大家jQuery程序设计有所帮助。