「jQuery-6」 ajax

. ajax的介绍

ajax 是 Asynchronous JavaScript and XML的简写，ajax一个前后台配合的技术，它可以让 javascript 发送异步的 http 请求，与后台通信进行数据的获取，ajax 最大的优点是实现局部刷新，ajax可以发送http请求，当获取到后台数据的时候更新页面显示数据实现局部刷新，在这里大家只需要记住，当前端页面想和后台服务器进行数据交互就可以使用ajax了。

这里提示一下大家, 在html页面使用ajax需要在web服务器环境下运行, 一般向自己的web服务器发送ajax请求。

2. ajax的使用

jquery将它封装成了一个方法$.ajax()，我们可以直接用这个方法来执行ajax请求。

示例代码:

<script>
    $.ajax({
    // 1.url 请求地址
    url:'http://t.weather.sojson.com/api/weather/city/101010100',
    // 2.type 请求方式，默认是'GET'，常用的还有'POST'
    type:'GET',
    // 3.dataType 设置返回的数据格式，常用的是'json'格式
    dataType:'JSON',
    // 4.data 设置发送给服务器的数据, 没有参数不需要设置

    // 5.success 设置请求成功后的回调函数
    success:function (response) {
        console.log(response);    
    },
    // 6.error 设置请求失败后的回调函数
    error:function () {
        alert("请求失败,请稍后再试!");
    },
    // 7.async 设置是否异步，默认值是'true'，表示异步，一般不用写
    async:true
});
</script>

ajax方法的参数说明:

url 请求地址
type 请求方式，默认是'GET'，常用的还有'POST'
dataType 设置返回的数据格式，常用的是'json'格式
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数
error 设置请求失败后的回调函数
async 设置是否异步，默认值是'true'，表示异步，一般不用写
同步和异步说明

同步是一个ajax请求完成另外一个才可以请求，需要等待上一个ajax请求完成，好比线程同步。
异步是多个ajax同时请求，不需要等待其它ajax请求完成，好比线程异步。

ajax的简写方式:

$.ajax按照请求方式可以简写成$.get或者$.post方式

ajax简写方式的示例代码:

 <script>
    $(function(){
        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.get("http://t.weather.sojson.com/api/weather/city/101010100", function(dat,status){
            console.log(dat);
            console.log(status);
            alert(dat);
        }).error(function(){
            alert("网络异常");
        });

        /*
         1. url 请求地址
         2. data 设置发送给服务器的数据, 没有参数不需要设置
         3. success 设置请求成功后的回调函数
         4. dataType 设置返回的数据格式，常用的是'json'格式, 默认智能判断数据格式
        */ 
        $.post("test.php", {"func": "getNameAndTime"}, function(data){
            alert(data.name);
            console.log(data.time);
        }, "json").error(function(){
            alert("网络异常");
        });
    });


</script>

$.get和$.post方法的参数说明:

$.get(url,data,success(data, status, xhr),dataType).error(func)$.post(url,data,success(data, status, xhr),dataType).error(func)

url 请求地址
data 设置发送给服务器的数据，没有参数不需要设置
success 设置请求成功后的回调函数

data 请求的结果数据
status 请求的状态信息, 比如: "success"
xhr 底层发送http请求XMLHttpRequest对象

dataType 设置返回的数据格式

"xml"
"html"
"text"
"json"

error 表示错误异常处理

func 错误异常回调函数

习大纲

基础学习路径

1.什么是AJAX

1.1概念

AJAX是Asynchronous javascript and xml 的缩写，表示异步javascript 和 xml ,是一种交互式网页应用开发技术。

AJAX是一些老技术的新应用，应用到了html css javascript dom , 以XMLHttpRequest为技术核心实现网页异步数据传输。

1.2特点

最大特点就是：网页不用刷新进行数据传输

1.3应用场景

用户注册

AJAX分页效果

图片加载瀑布流效果

2.AJAX工作流程

传统的数据提交方式

AJAX数据提交方式

通过上述对比，客户端用户部分减少了2个流程，交给了ajax去处理，那么就减少了用户的等待时间，用户体验大大的提升

3.AJAX的优点

? 减少服务器带宽，按需获得数据

注意：在一些有列表展示功能的地方优势特别突出

? 无刷新更新页面，减少用户的实际和心理等待时间

注：用户注册，用户登录。多数据信息的展示

? 更好的用户体验，传统数据提交会刷新页面，易丢失用户填写数据

? 主浏览器都支持

二、AJAX使用

1.创建ajax对象

XHR=new XMLHttpRequest();

2.建立链接

1.1语法

创建请求头使用OPEN,主要实现（请求类型，请求地址）

对象.open(请求类型GET/POST,请求地址,[同步true/异步false]);

默认：同步 True

1.2代码

//创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');

3.发送请求

1.1语法

主要实现请求服务器操作

对象.send(POST请求则填写POST的数据/GET请求可以不用写);

1.2代码

【HTML代码】
<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   
</script>
【PHP代码】
<?php
echo 'test';

脚下留心：

一定要在服务器目录下面运行AJAX-发送请求.html,不能直接用浏览器浏览该文件

4.响应请求（接受服务器返回的信息）

1.1语法

对象.responseText (获取服务器响应的字符串数据)

对象.responseXML(获取服务器响应的xml数据)

1.2代码

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   
   XHRObj.send();
   //alert返回的数据
   alert(XHRObj.responseText);
   
</script>

案例运行结果

脚下留心：无法响应数据

原因：在AJAX没有完成请求这个时候是没有返回值的，所以获取数据是没有结果的。

解决方法：通过判断reaystate==4 是否AJAX请求完成

1.3判断服务器是否响应成功

Onreadystatechange 作用：ajax在请求的过程中发生任何状态的变化都会调用该方法

Readystate 作用：返回ajax的请求状态

状态说明：

最终代码：以及结果

思考：为什么没有打印0~4

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   console.log(XHRObj.readyState);
   //发送请求
   XHRObj.send();
   //当请求状态发送变化时ajax会自动调用该方法onreadystatechange
   XHRObj.onreadystatechange=function(){
       console.log(XHRObj.readyState);
       if(XHRObj.readyState==4){
            console.log(XHRObj.responseText);
       }
       
   }
   console.log(XHRObj.readyState+'sdf');  
</script>

说明：

程序是从上往下进行的，里面的代码是等发送异步请求完了才去执行的。

状态0是无法获取的，因为实例化AJAX的对象，然而监听需要对象对象里面的属性来完成，所以0装就是实例化对象的时候。

思考：避免接口写错

例如：

在实际使用中，我们为了只有在请求的接口正确的时候获取相应的数据，一般我们要判断返回的HTTP状态是否正确，

使用：

对象.status==200

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo1.php');
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
//    console.log(XHRObj.readyState);
   //发送请求
   XHRObj.send();
   //当请求状态发送变化时ajax会自动调用该方法onreadystatechange
   XHRObj.onreadystatechange=function(){
//        console.log(XHRObj.readyState);
       if(XHRObj.readyState==4 && XHRObj.status==200){
            console.log(XHRObj.responseText);
       }
//        else{
//            //以邮件或者短信的形式发送通网站管理员
//            alert('服务器错误，很忙......');
//        }
       
   }
   
//    console.log(XHRObj.readyState+'sdf');
</script>

5.案例联系-检查用户名是否存在

1.1案例需求

判断用户名admin是否存在，当存在的时候返回【不可用】，当不存在的时候返回【可用】

1.2完成思路

明确需求：

第一步：给按钮增加点击事件

第二步：获取用户输入的值username

第三步：使用AJAX将内容发送给服务器端PHP文件

第四步：编写PHP文件checkuser.php 判断用户是否存在，返回结果

第五步：将PHP返回的结果弹出来

1.3HTML代码

<!--

第一步：给按钮增加点击事件

第二步：获取用户输入的值username

第三步：使用AJAX将内容发送给服务器端PHP文件

第四步：编写PHP文件checkuser.php 接受参数，并且判断用户是否存在，返回结果

第五步：将PHP返回的结果弹出来

-->

<script type="text/javascript">
   //按钮绑定事件，给input增加ID属性
  var checkObj=document.getElementById('check');
  checkObj.onclick=function(){
      var username=document.getElementById('username').value;
      //创建ajax对象
      var XHRObj=new XMLHttpRequest();
      //创建请求头，设置请求发送的地址和类型，并且将参数传递给服务端
      XHRObj.open('get','check.php?username='+username);
      //获取服务器端返回的数据  
      XHRObj.onreadystatechange=function(){
          if(XHRObj.readyState==4 && XHRObj.status==200){
              alert(XHRObj.responseText);
          }
      }
      //发送请求
      XHRObj.send();
     
  }
   
</script>

1.4PHP代码

<?php
//定义一个用户数组
$user=array('admin','xiaoming','xiaohong','xiaoqiang');
//获取传递的参数
$username=$_GET['username'];
//判断用户是否存在在数组中
if(in_array($username,$user)){
   echo '不可用';
}else{
   echo '可用';
}

进化版本

1)进化要求

当用户名可用的时候后面增加√说可用，当用户名不可用的时候出现一个×提示当前用户名太火，请换一个

HTML代码

<style>
   .error{
       color: red;
       font-size: 14px;
   }
   .green{
       color: green;
       font-size: 14px;
   }
   
</style>
<body>
<!--   <span class="error">×此用户名太首欢迎，请换一个</span>-->
<!--   <span class="green">√恭喜你，该用户可用</span>-->
   <table border="1">
       <th colspan="2">用户注册</th>
       <tr>
           <td><input id="username" name="username" type="text"/><div id='error'></div></td>
           <td><input id="check" type="button" value="检测用户"/></td>
       </tr>
       
   </table>
</body>
<!--
第一步：给按钮增加点击事件
第二步：获取用户输入的值username
第三步：使用AJAX将内容发送给服务器端PHP文件
第四步：编写PHP文件checkuser.php 接受参数，并且判断用户是否存在，返回结果
第五步：将PHP返回的结果弹出来
-->
<script type="text/javascript">
   //按钮绑定事件，给input增加ID属性
  var checkObj=document.getElementById('check');
  checkObj.onclick=function(){
      var username=document.getElementById('username').value;
      //创建ajax对象
      var XHRObj=new XMLHttpRequest();
      //创建请求头，设置请求发送的地址和类型，并且将参数传递给服务端
      XHRObj.open('get','check.php?username='+username);
      //获取服务器端返回的数据  
      XHRObj.onreadystatechange=function(){
          if(XHRObj.readyState==4 && XHRObj.status==200){
//               alert(XHRObj.responseText);
              if(XHRObj.responseText=='可用'){
                   document.getElementById('error').innerHTML='<span class="green">√恭喜你，该用户没有被注册</span>';
              }else{
                  document.getElementById('error').innerHTML=' <span class="error">×此用户名太首欢迎，请换一个</span>';
                 
              }
          }
      }
      //发送请求
      XHRObj.send();
     
  }
   
</script>

三、发送GET/POST请求

1.POST和GET的区别

数据方面：GET受浏览器的影响

POST 原则上是不受限制的，可以通过PHP配置POST_MAX_SIZE进行更改

安全方面：POST比GET要安全

文件上传：GET不能进行文件上传

2.Ajax之GET请求（加参数）

1.1实现方式

说明：在请求地址后面增加参数,例如：demo.php?a=111&b=222&c=333

1.2代码

【HTML代码】
<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头，请求方式，请求链接
   XHRObj.open('get','test.php?a=111&b=222&c=333');
   //发送请求
   XHRObj.send();
</script>
【PHP代码】
<?php
var_dump($_GET);

3.AJAX之POST请求

1.1实现方式

Open(‘POST’,请求地址);

设置发送的数据格式，采用URL编码格式

对象.setRequestHeader(‘content-type’,’application/x-www-form-urlencoded’);

对象.send(发送的数据);

1.2代码

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   XHRObj.onreadystatechange=function() {
   if (XHRObj.readyState==4) {
     alert(XHRObj.responseText);
   }
 }
   //创建请求头，请求方式，请求链接
   XHRObj.open('post','test.php');
   //发送post的数据
   var postData='name=123123&age=rrr';
   
   //设置数据编码格式,使用URL编码格式
   XHRObj.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
   
   //发送请求
   XHRObj.send(postData);
</script>

【PHP代码】

<?php

var_dump($_POST);

效果

4.练习：表单无刷新数据录入

四、AJAX同步异步请求

1.概念

同步：等待服务器响应完成在执行下一段JS代码（阻塞模式）

异步：不等服务器响应完成直接执行下一段JS代码（非阻塞模式）

2.验证同步

设置open(方式，请求地址,false/同步);

HTML【代码】

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php',false);
   //时时监控
   XHRObj.onreadystatechange=function(){
       if(XHRObj.readyState==4){
           console.log('111');
       }
   }
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   console.log('js执行完成');
   
</script>

【PHP代码】

为了增加延迟效果使用sleep

<?php
sleep(8);
echo 'test';

3.验证异步

【HTML代码】
<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','demo.php');
   //时时监控
   XHRObj.onreadystatechange=function(){
       if(XHRObj.readyState==4){
           console.log('111');
       }
   }
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   console.log('js执行完成');
   
</script>

【PHP代码】

<?php
sleep(8);
echo 'test';

五、解决缓存问题

1.缓存分析

我们再浏览一些网站的时候浏览器为了方便用户再次访问的时候增加用户访问体验会将一些静态资源文件缓存到本地

缓存的位置在：

选中IE浏览器右键

打开

静态缓存目录就出现再这里面了

说明：IE存在缓存

2.解决方案

1.1随机数

代码设置：?t=Math.random()

缺点：

1.不能保证URL绝对唯一

2.产生大量缓存文件

1.2时间

代码设置：?t=new Date().getTime(); //取得毫秒时间戳

优点：保证URL绝对唯一

缺点：依然产生大量缓存文件

1.3设置请求头

代码设置：对象.setRequestHeader("If-Modified-Since","0");

原理分析：

If-Modified-Since是标准的HTTP请求头标签，在发送HTTP请求时，把浏览器端缓存页面的最后修改时间一起发到服务器去，服务器会把这个时间与服务器上实际文件的最后修改时间进行比较。

如果时间一致，那么返回HTTP状态码304（不返回文件内容），客户端接到之后，就直接把本地缓存文件显示到浏览器中。

如果时间不一致，就返回HTTP状态码200和新的文件内容，客户端接到之后，会丢弃旧文件，把新文件缓存起来，并显示到浏览器中。

1.4设置相应头

代码设置：header("Cache-Control: no-cache, must-revalidate");

原理分析：

利用php的header函数向响应头中写数据，写的是告诉客户端：不要对本次的结果进行缓存。

这种做法，可以从根本上解决缓存问题，不产生任何缓存文件。

六、返回数据格式

1.数据格式分类

普通字符串文本格式：responseText

XML数据格式:responseXML

JSON 字符串数据格式：responseText (在实际工作中用到最多，最广泛的格式)

2.返回Text数据处理

1.1HTML代码

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','text.php');
   //时时监控
   XHRObj.onreadystatechange=function(){
       if(XHRObj.readyState==4 && XHRObj.status==200){
           document.getElementById('content').innerHTML=XHRObj.responseText;
       }
   }
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   
</script>
<body>
   <div id="content"></div>
</body>

1.2PHP代码

<?php

echo '<h1>返回的文本</h1>';

最终效果

3.返回XML数据处理

1.1HTML代码

<script type="text/javascript">
   //创建AJAX对象
   var XHRObj=new XMLHttpRequest();
   //创建请求头
   XHRObj.open('GET','xml.php');
   //时时监控
   XHRObj.onreadystatechange=function(){
       if(XHRObj.readyState==4 && XHRObj.status==200){
          var xmlObj=XHRObj.responseXML;
           //以前获取html文档我们使用  document.getElementByTagName()
           books=xmlObj.getElementsByTagName('book');
           for(i=0;i<books.length;i++){
//获取第二级的值我们使用childen 方法
               for(j=0;j<books[i].children.length;j++){
                   
                   console.log(books[i].children[j].innerHTML);
               }
           }
       }
   }
   //发送请求  对象.send(POST请求则填写POST的数据/GET请求可以不用写);
   XHRObj.send();
   
   
</script>

1.2PHP代码

首先确保PHP写的xml文件能再浏览器端访问

<?php
header('Content-Type:text/xml; charset=utf-8');
echo '<?xml version="1.0" encoding="utf-8"?>
<books>
   <book>
       <name>西游记</name>
       <price>50.12</price>
   </book>
   
   <book>
       <name>三国演义</name>
       <price>876.12</price>
   </book>
   
</books>
';

4.返回JSON数据处理

1.1什么是JSON数据

JSON(javascript Object Notation js 对象标记) 是一种轻量级的数据交换格式。

1.2JSON数据优势

数据格式比较简单，易于读写，格式都是压缩的，占用带宽小

易于解析这种语言，客户端JavaScript可以简单的通过eval()进行JSON数据的读取

因为JSON格式能够直接为服务器端代码使用, 大大简化了服务器端和客户端的代码开发量, 但是完成的任务不变, 且易于维护

1.3服务器端JSON生成和解析

PHP端生成JSON数据使用：json_encode(数组数据格式);

PHP端解析JSON数据使用：json_decode(待解码数据，true/false);

说明：false 解码出来的数据是一个对象，true,解码出来的是一个数组

1.4客户端解析JSON数据

由于我们返回值的处理使用的是responseText 格式

? JSON.parse()

语法格式：JSON.parse(字符串);

作用：从一个字符串中解析出json数据对象

前提：字符串必须是json格式的字符串

? Eval

七、综合案例-用户注册

1.需求

用户会员注册功能，用户填写好根据规则进行验证，如果验证成功提示用户注册成功。

验证规则：

1.用户名不能为空

2.用户名必须是由数字和字母组成，而且是在6~8位之间

2.HTML代码

<!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" xml:lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
   <title>AJAX-用户注册</title>
</head>
<style>
   dd{float: left;}    
</style>
<body>
  <div>
      <dl>
          <dd>用户名</dd>
          <dd><input type="text" name="username" id="username"></dd>
          <dd><input type="button" id="regbtn"  value="注册"></dd>
      </dl>
  </div>
   
</body>
<script type="text/javascript">
   
   //给注册按钮增加click事件
   
   var regbtn=document.getElementById('regbtn');
   
   regbtn.onclick=function(){
       
       //获取用户输入的值
       var username=document.getElementById('username').value;
       
        //创建AJAX对象
       var XHRObj=new XMLHttpRequest();
       //打开对象
       XHRObj.open('get','reg.php?username='+username);
       //实时监控AJAX运行状态
       XHRObj.onreadystatechange=function(){
           //判断服务器是否响应成功
           if(XHRObj.readyState==4 && XHRObj.status==200){
               //将json数据转换成对象
               jsonObj=JSON.parse(XHRObj.responseText);
               //判断用户是否操作成功进行页面跳转
               if(jsonObj.state==1){
                   location.href='success.html';
                   
               }else{
                   alert(jsonObj.msg);
               }
           }
       }
       //发送请求
       XHRObj.send();
       
   }
   
 
   
   
</script>
</html>

3.PHP代码

法： $.ajax([settings]);

$.ajax({
type: "POST",
url: "UserLogincheck",
data: {username:$("#username").val(), password:$("#password").val(),verify:$("#verify").val()},
dataType: "json",
success: function(data){
if(data==1){
// 用户名或密码错误
alert("用户名或密码错误");
}
else if(data==2){
alert("验证码错误");
// 验证码错误
}
else if(data==0){
window.location.href="index";
}
//跳转页面
},
error:function(XMLHttpRequest, textStatus, errorThrown){//请求失败时调用此函数
console.log(XMLHttpRequest.status);
console.log(XMLHttpRequest.readyState);
console.log(textStatus);
}
});

php作为后台的处理过程

public function UserLogincheck(){//用户登陆验证(用户名和邮箱均可登陆)
$very=new \Think\Verify();
if($very->check($_POST['verify'])){//验证码正确
$user_admin=I('post.username');
$judge=" (user_name='$user_admin' or user_email='$user_admin' )";
$user_del_status=$this->user->where($judge)->getField('user_del');
if($user_del_status==0){//用户未被注销
$user_password=I('post.password');
$judge .="and user_password='$user_password'";
$res=$this->user->where($judge)->find();
if($res){//记录用户登陆状态
$_SESSION['ADMIN_user_id']=$this->user->where($judge)->getField('user_id');
$_SESSION['ADMIN_user_name']=$data['user_name'];
$this->ajaxReturn(0);//登陆成功
}
$this->ajaxReturn(1);//用户名或密码错误
}
else
$this->ajaxReturn(8);//用户信息被注销
}
else
$this->ajaxReturn(2);//验证码错误
}

ajax参数详解：

data

类型：String

发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:["bar1", "bar2"]} 转换为 '&foo=bar1&foo=bar2'。

dataFilter

类型：Function

给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。

dataType

类型：String

预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

"xml": 返回 XML 文档，可用 jQuery 处理。

"html": 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 "cache" 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）

"json": 返回 JSON 数据。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

"text": 返回纯文本字符串

error

类型：Function

默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 "timeout", "error", "notmodified" 和 "parsererror"。

这是一个 Ajax 事件。

global

类型：Boolean

是否触发全局 AJAX 事件。默认值: true。设置为 false 将不会触发全局 AJAX 事件，如 ajaxStart 或 ajaxStop 可用于控制不同的 Ajax 事件。

ifModified

类型：Boolean

仅在服务器数据改变时获取新数据。默认值: false。使用 HTTP 包 Last-Modified 头信息判断。在 jQuery 1.4 中，它也会检查服务器指定的 'etag' 来确定数据没有被修改过。

jsonp

类型：String

在一个 jsonp 请求中重写回调函数的名字。这个值用来替代在 "callback=?" 这种 GET 或 POST 请求中 URL 参数里的 "callback" 部分，比如 {jsonp:'onJsonPLoad'} 会导致将 "onJsonPLoad=?" 传给服务器。

jsonpCallback

类型：String

为 jsonp 请求指定一个回调函数名。这个值将用来取代 jQuery 自动生成的随机函数名。这主要用来让 jQuery 生成度独特的函数名，这样管理请求更容易，也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存 GET 请求的时候，指定这个回调函数名。

password

类型：String

用于响应 HTTP 访问认证请求的密码

processData

类型：Boolean

默认值: true。默认情况下，通过data选项传递进来的数据，如果是一个对象(技术上讲只要不是字符串)，都会处理转化成一个查询字符串，以配合默认内容类型 "application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息，请设置为 false。

scriptCharset

类型：String

只有当请求时 dataType 为 "jsonp" 或 "script"，并且 type 是 "GET" 才会用于强制修改 charset。通常只在本地和远程的内容编码不同时使用。

success

类型：Function

请求成功后的回调函数。

参数：由服务器返回，并根据 dataType 参数进行处理后的数据；描述状态的字符串。

这是一个 Ajax 事件。

traditional

类型：Boolean

如果你想要用传统的方式来序列化数据，那么就设置为 true。请参考工具分类下面的 jQuery.param 方法。

timeout

类型：Number

设置请求超时时间（毫秒）。此设置将覆盖全局设置。

type

类型：String

默认值: "GET")。请求方式 ("POST" 或 "GET")，默认为 "GET"。注意：其它 HTTP 请求方法，如 PUT 和 DELETE 也可以使用，但仅部分浏览器支持。

url

类型：String

默认值: 当前页地址。发送请求的地址。

username

类型：String

用于响应 HTTP 访问认证请求的用户名。

xhr

类型：Function

需要返回一个 XMLHttpRequest 对象。默认在 IE 下是 ActiveXObject 而其他情况下是 XMLHttpRequest 。用于重写或者提供一个增强的 XMLHttpRequest 对象。这个参数在 jQuery 1.3 以前不可用。

在线咨询

上一篇：开源的硬件和软件平台-Arduino
下一篇：WEBAPP秘密开发笔记第五集

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「jQuery-6」 ajax

. ajax的介绍

2. ajax的使用

习大纲

1.什么是AJAX

1.1概念

1.2特点

1.3应用场景

2.AJAX工作流程

3.AJAX的优点

二、AJAX使用

1.创建ajax对象

2.建立链接

1.1语法

1.2代码

3.发送请求

1.1语法

1.2代码

4.响应请求（接受服务器返回的信息）

1.1语法

1.2代码

1.3判断服务器是否响应成功

5.案例联系-检查用户名是否存在

1.1案例需求

1.2完成思路

1.3HTML代码

1.4PHP代码

三、发送GET/POST请求

1.POST和GET的区别

2.Ajax之GET请求（加参数）

1.1实现方式

1.2代码

3.AJAX之POST请求

1.1实现方式

1.2代码

四、AJAX同步异步请求

1.概念

2.验证同步

3.验证异步

五、解决缓存问题

1.缓存分析

2.解决方案

1.1随机数

1.2时间

1.3设置请求头

1.4设置相应头

六、返回数据格式

1.数据格式分类

2.返回Text数据处理

1.1HTML代码

1.2PHP代码

3.返回XML数据处理

1.1HTML代码

4.返回JSON数据处理

1.1什么是JSON数据

1.2JSON数据优势

1.3服务器端JSON生成和解析

1.4客户端解析JSON数据

? JSON.parse()

? Eval

七、综合案例-用户注册

1.需求

2.HTML代码

3.PHP代码

您的项目需求