zoukankan      html  css  js  c++  java
  • 跟着jquery API学jquery之八 ajax

    看到ajax这里我们先看一下如何用javascritp写一个ajax出来

    Ajax的原理就是XMLHttpRequest这个对象

    首先我们需要建立这个对象

    首先我们建立一个xajax.js的文件

    1 var request = false;
    2
    3  try {
    4
    5 request = new XMLHttpRequest();
    6
    7 } catch (ex){
    8
    9 try {
    10
    11 request = new ActiveXObject("Msxml2.XMLHTTP");
    12
    13 } catch(ex1){
    14
    15 try {
    16
    17 request = new ActiveXObject("Microsoft.XMLHTTP");
    18
    19 } catch (failed) {
    20
    21 request = false;
    22
    23 }
    24
    25 }
    26
    27 }
    28
    29  

    这里我们建立了一个XMLHttpRequest对象 ,XMLHttpRequest对象唯一的目的就是发送请求和接受相应

    我们在ajax中常用的几个函数

    open():建立到服务器的新请求。

    send():向服务器发送请求。

    abort():退出当前请求。

    readyState:提供当前 HTML 的就绪状态。

    responseText:服务器返回的请求响应文本。

     

    1 function GetInfo(url) {
    2
    3 request.open("GET", url, true); //open函数中设置为true是异步的关键
    4  
    5 request.onreadystatechange = callback;//设置一个回调函数
    6  
    7 request.send(null); //send用来传递参数 如果没有则为null
    8  
    9 }
    10
    11
    12
    13  //现在我们实现这个回调函数
    14  
    15  function callback() {
    16
    17 //首先我们判断一下状态
    18  
    19 if (request.readyState == 4) { //4表示响应完成
    20  
    21 if (request.status == 200) { //200表示合同谈判状态是顺利的 比如我们会见到404的的错误
    22  
    23 //判断完成后我们就可以对服务器返回的值做处理了
    24  
    25 $("#a").text(request.responseText);
    26
    27
    28
    29 }
    30
    31 }
    32
    33 }
    34
    35

    这样我们就基本完成了一个最基本的ajax,然后我们建立一个hand.ashx的处理程序

    我们在index.aspx页面上放置一个按钮 ,并写上onclick="GetInfo('hand.ashx')" ,这样就完成了一个简单的ajax

    当jquery出现之后 ,ajax就变成了一句话的事情 

    要实现上面的请求 jQuery要怎么做呢

    我们看一下load这个函数:载入远程的html文件代码,并插入到DOM中,

    那么我们只需要

    $('#a').load('hand.ashx')

    就可以实现上面我们写的N多代码

    当然,我们知道有两中方式 get和post,jquery中提供了

    $.get(url,[data],[callback],type)  $.post()两种方式,分别用简单的get/post来取代复杂的$.ajax

    其中 url表示地址 data为传入参数 callback为回调函数 type为返回值的类型

    当然,有时候这种方式也无法满足我们的需求 这里就要用到$.ajax了

    在这个函数中可以很方便色设置ajax的细节 如:

    $.ajax({
    type:
    "get",
    url:
    "hand.ashx ",
    success:
    function(text){
    alert( text);
    }
    });
    当然我们并不希望每次写$ajax都要重复的写这些细节,这时我们就要用到
    $ajaxSetup了 ,用来设置全局的ajax默认选项,参数方式与$.ajax一样
     到这里ajax就差不多了,但是有时候我们需要对ajax执行的进度操作,比如在请求数据时显示 请稍候  ,在数据请求完成时显示数据之类的。
    这里就要用到ajax事件了
     ajaxSend(callback) ajax请求发送前执行
    ajaxStart(callback) ajax请求开始时执行
    ajaxComplete(callback)  ajax请求完成时执行
    jQueryajaxStop(callback)  ajax请求结束时执行
    ajaxSuccess(callback)   ajax请求成功时执行
    jQueryajaxError(callback) ajax请求错误时执行
    
    
    相关代码
  • 相关阅读:
    JAVA学习第五十四课 — IO流(八)打印流 & 序列流
    jdbc框架 commons-dbutils+google guice+servlet 实现一个例子
    java ThreadLocal 理解
    jdbc框架 commons-dbutils的使用
    Java 集合系列06之 Vector详细介绍(源码解析)和使用示例
    Java 集合系列05之 LinkedList详细介绍(源码解析)和使用示例
    Java 集合系列04之 fail-fast总结(通过ArrayList来说明fail-fast的原理、解决办法)
    Java 集合系列03之 ArrayList详细介绍(源码解析)和使用示例
    Java 集合系列02之 Collection架构
    Java 集合系列01之 总体框架
  • 原文地址:https://www.cnblogs.com/ac1985482/p/1708800.html
Copyright © 2011-2022 走看看