1、1 1目录12.1 Ajax简介12.2 Ajax工作原理12.3 Ajax工作过程12.4 jQuery中的Ajax技术12.1 Ajax简介uAjax(Asynchronous JavaScript and XML),全称异步的 JavaScript 和 XML技术,它是一种支持异步请求的技术。uAjax的技术组成12.2 Ajax工作原理u传统WEB应用工作过程12.2 Ajax工作原理uAjax WEB应用模式12.2 Ajax工作原理uAjax工作原理12.3 Ajax工作过程u1.创建对象:XMLHttpRequestu2.连接服务器,发送请求给服务器端u3.发送数据,服务器处理请
2、求,AJax引擎处于等待u4.处理服务器返回的结果,通过JavaScript的DOM操作呈现到页面上12.3 Ajax工作过程function get_ajax(url,fnSucc,fnFail)/1.创建Ajax对象var xmlhttp;if(window.XMLHttpRequest)xmlhttp=new XMLHttpRequest();else xmlhttp=new ActiveXObject(Microsoft.XMLHTTP);/2.连接服务器(打开和服务器的连接)xmlhttp.open(GET,url,true);/GET方式/3.发送xmlhttp.send();/4
3、.接收xmlhttp.onreadystatechange=function()if(xmlhttp.readyState=4&xmlhttp.status=200)fnSucc(xmlhttp.responseText);elseif(fnFail)fnFail();Ajax操作函数url:GET方式请求的地址;fnSucc:请求成功后的回调函数;fnFail:请求错误的回调函数。12.4 jQuery中的Ajax技术12.4.1$.get()方法12.4.2$.post()方法12.4.3$.ajax()方法12.4.1$.get()方法方法名:$.get()格式:$.get(url,da
4、ta,callback)功能:使用GET方式来进行异步请求返回值XMLHttpRequest参数:url(String):发送请求的URL地址.data(Map):(可选)要发送给服务器的数据,以Key/value 的键值对形式表示,会做为QueryString附加到请求URL中。callback(Function):(可选)载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。示例$.get(test.php,name:Joan,pwd:iZQ,function(data)alert(数据处理成功!:+data););12.4.2$.post()方法方法名$.
5、post()格式$.post(url,data,callback,type)功能使用POST方式来进行异步请求返回值 XMLHttpRequest参数:url(String):发送请求的URL地址.data(Map):(可选)要发送给服务器的数据,以 Key/value 的键值对形式表示。callback(Function):(可选)载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。示例$.post(test.php,name:Joan,pwd:iZQ,function(data)alert(数据处理成功!:+data););12.4.3$.ajax()方法方法方法名名$.ajax()格式$.ajax(key/value 对象)功能通过 HTTP 请求加载远程数据。返回值XMLHttpRequest示例$.ajax(type:POST,url:isused.php,data:name=Joan&pwd=123123,success:function(msg)alert(数据处理完成:+msg););传道,授业,解惑