AJAX小实例

AJAX(Asynchronous Javascript and XML)---异步交互（通信）

1、 涉及的技术内容

1） 使用XHTML和CSS标准的显示技术；

2） 使用DOM进行动态显示和交互；

3） XML和XSLT进行数据交换和处理；

4） XMLHttpRequest进行数据的检索---浏览器内置的对象；

5） Javascript来将以上技术融合；

1、）同步：用户（在URL地址栏输入页面请求http://www.baidu.com）----服务器端接收到请求，进行相应处理（这段时间客户处于等待状态，后续操作被暂停）------

返回数据到客户端----客户才能继续操作

 

2、 ）异步通信工作原理（新思路）

异步：用户（在URL地址栏输入页面请求http://www.baidu.com）--

服务器接受信息（函数或者新方法等待接受信息）-----客户端继续向

下执行（如果服务器处理请求结束，结果返回到新方法，）-----浏览器

只处理所需的数据（不涉及整个页面的刷新）

 

3、 ）功能

1） 改善表单验证方式，不需要打开新的页面，也不需要进行整个

页面的提交；

2） 不需要刷新，减少了客户的等待时间；

3） 按需要获取数据信息；

4） 读取外部的数据，进行整合；

 

 

实例介绍：

(1)获取客户端输入的用户信息

 1、用javascript的方法：javasceipt---DOM

  $_username =document.getElementById("name").value;

 2、用jquery需要引入jquery文件

         第一步：获取元素节点的信息

         var name = $("#name");

          第二部：获取该节点的数据  val();

        $_username = name.val();

 

(2)将接收到的数据发送到服务器端php文件

Jquery方法：

$.get("服务器端的脚本名称(*.php)"，"参数{名：值，名：值。。。。。}",callback)

1）             callback如果写在外部   写函数的名称

fuction callback([参数]){ 。。。。。。。。。。。。。。}

2）             callback如果写在内部   不用写函数的名称

 $.get("服务器端的脚本名称(*.php)"，"参数{名：值，名：值。。。。。}",function（[参数]。。。。。。。})

3）             该参数保存在服务器端返回的内容；

(4)动态的显示到前台div

var da = $("#div");

da.html(date);