从零开始学习jQuery (六) jquery中的AJAX使用

Maison

interface Web

js tutoriel

从零开始学习jQuery (六) jquery中的AJAX使用_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 06:10 PM

ajaxjquery

一.摘要

本系列文章将带您进入jQuery的精彩世界, 其中有很多作者具体的使用经验和解决方案, 即使你会使用jQuery也能在阅读中发现些许秘籍.

本篇文章讲解如何使用jQuery方便快捷的实现Ajax功能.统一所有开发人员使用Ajax的方式.

二.前言

Ajax让用户页面丰富起来, 增强了用户体验. 使用Ajax是所有Web开发的必修课. 虽然Ajax技术并不复杂, 但是实现方式还是会因为每个开发人员的而有所差异.jQuery提供了一系列Ajax函数来帮助我们统一这种差异, 并且让调用Ajax更加简单.

三.原始Ajax与jQuery中的Ajax

首先通过实例, 来看一下jQuery实现Ajax有多简单. 下面是一个使用原始Ajax的示例:

<SPAN class=kwrd><!</SPAN><SPAN class=html>DOCTYPE</SPAN> <SPAN class=attr>html</SPAN> <SPAN class=attr>PUBLIC</SPAN> <SPAN class=kwrd>"-//W3C//DTD XHTML 1.0 Transitional//EN"</SPAN> <SPAN class=kwrd>"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd><</SPAN><SPAN class=html>html</SPAN> <SPAN class=attr>xmlns</SPAN><SPAN class=kwrd>="http://www.w3.org/1999/xhtml"</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd><</SPAN><SPAN class=html>head</SPAN><SPAN class=kwrd>></SPAN>
  <SPAN class=kwrd><</SPAN><SPAN class=html>title</SPAN><SPAN class=kwrd>></SPAN>jQuery Ajax<SPAN class=kwrd></</SPAN><SPAN class=html>title</SPAN><SPAN class=kwrd>></SPAN>
  <script type=<SPAN class=str>"text/javascript"</SPAN>>
    $(<SPAN class=kwrd>function</SPAN>()
    {
      <SPAN class=kwrd>var</SPAN> xhr = <SPAN class=kwrd>new</SPAN> AjaxXmlHttpRequest();
      $(<SPAN class=str>"#btnAjaxOld"</SPAN>).click(<SPAN class=kwrd>function</SPAN>(<SPAN class=kwrd>event</SPAN>)
      {
        <SPAN class=kwrd>var</SPAN> xhr = <SPAN class=kwrd>new</SPAN> AjaxXmlHttpRequest();
        xhr.onreadystatechange = <SPAN class=kwrd>function</SPAN>()
        {
          <SPAN class=kwrd>if</SPAN> (xhr.readyState == 4)
          {
            document.getElementById(<SPAN class=str>"divResult"</SPAN>).innerHTML = xhr.responseText;
          }
        }
        xhr.open(<SPAN class=str>"GET"</SPAN>, <SPAN class=str>"data/AjaxGetCityInfo.aspx?resultType=html"</SPAN>, <SPAN class=kwrd>true</SPAN>);
        xhr.send(<SPAN class=kwrd>null</SPAN>);
      });
    })

    <SPAN class=rem>//跨浏览器获取XmlHttpRequest对象</SPAN>
    <SPAN class=kwrd>function</SPAN> AjaxXmlHttpRequest()
    {
      <SPAN class=kwrd>var</SPAN> xmlHttp;
      <SPAN class=kwrd>try</SPAN>
      {
        <SPAN class=rem>// Firefox, Opera 8.0+, Safari</SPAN>
        xmlHttp = <SPAN class=kwrd>new</SPAN> XMLHttpRequest();
      }
      <SPAN class=kwrd>catch</SPAN> (e)
      {

        <SPAN class=rem>// Internet Explorer</SPAN>
        <SPAN class=kwrd>try</SPAN>
        {
          xmlHttp = <SPAN class=kwrd>new</SPAN> ActiveXObject(<SPAN class=str>"Msxml2.XMLHTTP"</SPAN>);
        }
        <SPAN class=kwrd>catch</SPAN> (e)
        {

          <SPAN class=kwrd>try</SPAN>
          {
            xmlHttp = <SPAN class=kwrd>new</SPAN> ActiveXObject(<SPAN class=str>"Microsoft.XMLHTTP"</SPAN>);
          }
          <SPAN class=kwrd>catch</SPAN> (e)
          {
            alert(<SPAN class=str>"您的浏览器不支持AJAX！"</SPAN>);
            <SPAN class=kwrd>return</SPAN> <SPAN class=kwrd>false</SPAN>;
          }
        }
      }
      <SPAN class=kwrd>return</SPAN> xmlHttp;
    }    
  <SPAN class=kwrd></</SPAN><SPAN class=html>script</SPAN><SPAN class=kwrd>></SPAN>

<SPAN class=kwrd></</SPAN><SPAN class=html>head</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd><</SPAN><SPAN class=html>body</SPAN><SPAN class=kwrd>></SPAN>  
  <SPAN class=kwrd><</SPAN><SPAN class=html>button</SPAN> <SPAN class=attr>id</SPAN><SPAN class=kwrd>="btnAjaxOld"</SPAN><SPAN class=kwrd>></SPAN>原始Ajax调用<SPAN class=kwrd></</SPAN><SPAN class=html>button</SPAN><SPAN class=kwrd>><</SPAN><SPAN class=html>br</SPAN> <SPAN class=kwrd>/></SPAN>
  <SPAN class=kwrd><</SPAN><SPAN class=html>br</SPAN> <SPAN class=kwrd>/></SPAN>
  <SPAN class=kwrd><</SPAN><SPAN class=html>div</SPAN> <SPAN class=attr>id</SPAN><SPAN class=kwrd>="divResult"</SPAN><SPAN class=kwrd>></</SPAN><SPAN class=html>div</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd></</SPAN><SPAN class=html>body</SPAN><SPAN class=kwrd>></SPAN>
<SPAN class=kwrd></</SPAN><SPAN class=html>html</SPAN><SPAN class=kwrd>></SPAN>

上面的实例中, data/AjaxGetCityInfo.aspx?resultType=html 地址会返回一段HTML代码.

使用原始Ajax, 我们需要做较多的事情, 比如创建XmlHttpRequest对象, 判断请求状态, 编写回调函数等.

而用jQuery的Load方法, 只需要一句话:

$(<SPAN class=str>"#divResult"</SPAN>).load(<SPAN class=str>"data/AjaxGetCityInfo.aspx"</SPAN>, { <SPAN class=str>"resultType"</SPAN>: <SPAN class=str>"html"</SPAN> });

曾经我是一个原始Ajax的绝对拥护者, 甚至摒弃微软的Asp.net Ajax, 因为我想要最高的代码灵活度. 使用原始Ajax让我感觉完成自己的工作更加轻松, 即使多写了一些代码. 但是当我去翻看别人的Ajax代码并且尝试修改的时候, 我改变了我的看法--我们的代码到处分布着创建XmlHttpRequest方法的函数, 或者某些Ajax程序逻辑性和结构性很差, 很难看懂.

我们可以将通用方法放到一个js文件中, 然后告诉大家"嘿伙伴们, 都来用这个js中的方法". 但是在某些时候有些新来的外包人员并不知道有这个js文件的存在. 而且其实这个通用的js就是一个公共的脚本类库, 我相信没有人会觉得自己开发一个类库会比jQuery更好!

所以我放弃了制造轮子的计划, 大家都使用jQuery编写Ajax相关的方法就可以解决各种差异性问题, 并且让工作更有效率.

现在只是用jQuery的Ajax函数, 我的页面变得简洁了:

DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>jQuery Ajaxtitle>
  <script type="text/javascript" src="scripts/jquery-1.3.2-vsdoc2.js">script>
  Outils d'IA chauds
Undresser.AI UndressApplication basée sur l'IA pour créer des photos de nu réalistes
AI Clothes RemoverOutil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI ToolImages de déshabillage gratuites
Clothoff.ioDissolvant de vêtements AI
AI Hentai GeneratorGénérez AI Hentai gratuitement.
Afficher plus
Article chaud
R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Assassin's Creed Shadows: Solution d'énigmes de coquille1 Il y a quelques semainesByDDD
R.E.P.O. Comment réparer l'audio si vous n'entendez personne3 Il y a quelques semainesBy尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique1 Il y a quelques semainesByDDD
Afficher plus
Outils chauds
SublimeText3 version MacLogiciel d'édition de code au niveau de Dieu (SublimeText3)
Dreamweaver MacOutils de développement Web visuel
PhpStorm version MacLe dernier (2018.2.1) outil de développement intégré PHP professionnel
ZendStudio 13.5.1 MacPuissant environnement de développement intégré PHP
SublimeText3 version chinoiseVersion chinoise, très simple à utiliser
Afficher plus
Sujets chauds
Où se trouve l’entrée de connexion pour la messagerie Gmail ?7434
15
Tutoriel CakePHP1359
52
Quel est le format du nom de compte de Steam76
11
Clé d&amp;#39;activation Win11 permanent29
19
Afficher plus