ajax一切正常却出不来结果怎么办？

用jQuery可以将结构(Html)、美化(Css)与交互(JavaScript)的部分有效的分离，从而让页面得到良好的可读性。

利用jQuery开发程序的步骤如下:

1、将jquery-1.11.3.js 复制到工程的js目录下

2、在当前页面利用<script>标签引入jquery-1.11.3.js

3、在引入该js后,我们的程序中就增加了一个内置对象jQuery,这是jQuery的核心对象,同时jQuery对象还可以使用美元符号$进行替

4、在引入后<script>标签内编写jQuery代码

文档就绪函数

文档就绪函数是jQuery中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

文档就绪函数的使用方法

完整方式: $(document).ready(fn) 或者jQuery(document).ready(fn)

简写方式: $(fn)

其中参数fn是指一个函数,代表了页面DOM元素加载完成后要执行的代码.

请确保在 <body> 元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

案例

[html] view plain copy

<body>
<div>
<table border="1">
<tr style="height: 40px;display: none;">
<td style="width: 100px">商品id</td>
<td style="width: 150px">
<input type="text" id="id" value="">
</td>
</tr>
<tr style="height: 40px;">
<td style="width: 100px">商品分类</td>
<td style="width: 150px">
<select id="cate" onchange="change()">
<option>---请选择---</option>
</select>
</td>
</tr>
<tr style="height: 40px;">
<td style="width: 100px" >商品品牌</td>
<td style="width: 150px">
<select id="brand">
<option>---请选择---</option>
</select>
</td>
</tr>
<tr style="height: 40px;">
<td style="width: 100px" >商品名称</td>
<td style="width: 150px" >
<input id="name" type="text">
</td>
</tr>
<tr style="height: 40px;">
<td style="width: 100px" >商品描述</td>
<td style="width: 150px">
<textarea rows="5" cols="10" id="desc"></textarea>
</td>
</tr>
<tr style="height: 40px;">
<td style="width: 100px" >商品价格</td>
<td style="width: 150px" >
<input type="text" id="price">
</td>
</tr>
<tr style="height: 40px;">
<td colspan="2" style="text-align: center;">
<button onclick="tj()">提交</button>
<button >重置</button>
<button onclick="gbtj()">关闭</button>
</td>
</tr>
</table>
</div>
</body>
<script type="text/javascript">
/* 就绪函数，加载分类列表 */
$(document).ready(function(){
alert("11");
$.ajax({
type: "POST",
url: "goodsController?method=getCateList",
dataType:"json",
data: "",
success: function(obj){
var fl="";
for(var i=0;i<obj.length;i++){
fl+="<option value='"+obj[i].id+"'>"+obj[i].cat_name+"</option>";
}
$("#cate").html(fl);
}
});
});
</script>

这种时候就会出现ajax没有触发的情况，这时将<script></script>放在<body></body>之前，才会正常显示。

当遇到代码没有问题，可结果就是运行不出来时，不妨试一下改变<script></script>的顺序。

习大纲

基础学习路径

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 ?

a) 无刷新的数据读取；

2. 关于浏览器缓存：

a) 缓存机制：根据地址来缓存，同样地址只读一次；

b) 解决缓存困扰：在文件名后加上一个时间戳参数；保存每次读取文件的路径都不一样，这样浏览器就不会去缓存中拿而去读新的；

3. Ajax请求动态数据：

a) 请求JSON文件；

b) Ajax 从服务器上所读取的所有东西都是以文本的形式存在的；

c) eval的使用，将返回的string转换成arr,或json;

d) 配合DOM使用；

4. eval_r(str):

a) 接受一个字符串作为参数，这个字符串里面可以放任何JS代码；

b) eval可以计算字符串里的值；

5. Ajax的原理：

a) HTTP 请求：

i. GET方式：安全性低、容量小，但便于分享，更适合获取数据；（如：浏览帖子）

ii. POST方法：更适合上传数据；（如：用户注册）

iii. Get方式会缓存，因为要从服务器上读东西；Post方式不会缓存东西的；

6. Ajax请求服务器数据的4个步骤：

a) 创建一个Ajax对象（买个手机）；

i. 非IE6 ： new XMLHttpRequest();

ii. IE6 : new ActiveXObject("Microsoft XMLHTTP");

b) 连接服务器（拨号）；

c) 发送请求，告诉服务器要什么（说话）；

d) 接收返回值（听）；

7. Ajax对象创建的兼容处理：

a) 用if (window.XMLHttpRequest) 取代if (XMLHttpRequest)

b) 原理：

i. 用一个不存在的变量：出错；

ii. 用一个不存在的属性：undefined；

8. Ajax连接服务器：

a) oAjax.open(方法，url, 是否为异步bool);

b) 方法：大多用”Get”;

c) 同步与异步：

i. 同步：任何两件事不能一块儿做；

ii. 异步：多件事儿可以一起进行；Ajax天生就该工作在异步模式下的；

9. Ajax发送请求：

a) oAjax.send();

10.Ajax接收服务器的返回信息：

a) oAjax.onreadystatechange 事件：

i. 它类似于window.onload;

ii. 用来监控请求状态；

iii. 是当客户端和服务器那边有通信发生或有状态变化的时候会来调用；

iv. 客户端和服务器的通信不是一步就完成的；

v. oAjax.readyState属性：告诉我们客户端和服务器的通信发生到哪一步了； 4 代表完成；

vi. oAjax.readyState == 4 ，只代表完成，不代表成功；

vii. oAjax.status == 200 ，代表成功；

viii. oAjax.status , 400多是客户端错误， 500多是服务器错误， 300多是重定向；

ix. oAjax.responseText , 就是取得服务器发回的内容；

11.编写Ajax库：

在线咨询

上一篇：html多页面实现背景音乐的连续播放，简单处理笔记
下一篇：重蔚的php学习第二天之HTML篇

您的项目需求

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

整合营销服务商

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代码

您的项目需求