浅谈Ajax基本用法-JobPlus

Ajax-Asynchronous JavaScript and Xm
是实现客户端与服务器端异步交互的主要手段，主要使用在B/S架构上。
在浏览器中一般分为同步交互和异步交互两种交互模式。
同步交互：
      客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(只能等)。
异步交互：
      客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不用等)
同步交互和异步交互的区别：
同步交互：
      1.执行速度相对异步交互慢。
      2.响应的是完整的HTML页面。
异步交互：
      1.执行的速度相对同步交互要快。
      2.响应的是部分数据
Ajax核心对象
Ajax的核心对象是 - XMLHttpRequest对象。
Ajax所有的属性和方法以及事件都需要在XMLHttpRequest对象中进行调用
如何创建Ajax核心对象
一般来说，有一个固定的套路，就是定义一个创建XMLHttpRequest对象的函数，在用变量去调用该函数进行创建。

// 定义创建XMLHttpRequest对象的函数
function getXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest(); //除IE外其他浏览器
}else{
xhr=new ActiveXObject('Microsoft.XMLHttp') //IE
}
return xhr;
}
var xhr=getXhr();//创建XMLHttpRequest对象

复制代码

Ajax常用的属性、方法及事件
属性：
      readyState - 服务器端的响应状态
      status - 服务器端状态码
      responseText - 服务器端返回的文本内容
      responseXML - 服务器端返回的XML格式数据

方法：
      abort() - 取消请求
      getAllRequestHeaders() - 获取响应的所有http头
      getRequsetHeader() - 获取指定响应的http头
         setRequestHeader() - 设置指定请求的http头
      open(method,url) - 创建链接
            method:get/post（常用）
      send() - 发送链接
            如果open的method为get，send里的参数为null

事件
      onreadystatechange - 监听事件
            当服务器的状体改变时就会触发该事件(readyState)
实现Ajax的异步交互步骤
创建XMLHttpRequest核心对象
      固定写法 - 独立编写
            与服务器端建立连接
      使用XMLHttpRequest对象的open(method,url)方法
            method - 设置当前请求的类型
            url - 设置当前请求的地址
      向服务器端发送请求
            使用XMLHttpRequest对象的send(请求参数)方法
            请求参数的格式 - key=value
      接收服务器端的响应数据
            使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态
            使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)
            使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)
            使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据

var xhr=getXhr(); //调用创建XMLHttpRequset对象函数
xhr.open('post','05.php');
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded')
xhr.send('state=2&provcince='+provinceEle.value);
xhr.onreadystatechange=function(){
if(xhr.readyState==4&&xhr.status==200){
var data=xhr.responseText;
console.log(data);
}
}

复制代码

<table width="100%"><tbody><tr><td>Ajax-Asynchronous JavaScript and Xm 是实现客户端与服务器端异步交互的主要手段，主要使用在B/S架构上。 在浏览器中一般分为同步交互和异步交互两种交互模式。 同步交互：         客户端向服务器端发送请求,到服务器端进行响应,这个过程中,用户是不能做任何其他事情(只能等)。 异步交互：         客户端向服务器端发送请求，直到服务器端进行响应，这个过程中，用户可以做任何其他事情(不用等) 同步交互和异步交互的区别： 同步交互：         1.执行速度相对异步交互慢。         2.响应的是完整的HTML页面。 异步交互：         1.执行的速度相对同步交互要快。         2.响应的是部分数据 Ajax核心对象 Ajax的核心对象是 - XMLHttpRequest对象。 Ajax所有的属性和方法以及事件都需要在XMLHttpRequest对象中进行调用 如何创建Ajax核心对象 一般来说，有一个固定的套路，就是定义一个创建XMLHttpRequest对象的函数，在用变量去调用该函数进行创建。<ol><li>// 定义创建XMLHttpRequest对象的函数 </li><li>function getXhr(){ </li><li>        var xhr=null; </li><li>        if(window.XMLHttpRequest){ </li><li>                xhr=new XMLHttpRequest(); //除IE外其他浏览器 </li><li>        }else{ </li><li>                xhr=new ActiveXObject('Microsoft.XMLHttp') //IE </li><li>        } </li><li>        return xhr; </li><li>        }</li><li>var xhr=getXhr();//创建XMLHttpRequest对象 </li></ol>复制代码Ajax常用的属性、方法及事件 属性：         readyState - 服务器端的响应状态         status - 服务器端状态码         responseText - 服务器端返回的文本内容         responseXML - 服务器端返回的XML格式数据 方法：         abort() - 取消请求         getAllRequestHeaders() - 获取响应的所有http头         getRequsetHeader() - 获取指定响应的http头            setRequestHeader() - 设置指定请求的http头         open(method,url) - 创建链接                 method:get/post（常用）         send() - 发送链接                 如果open的method为get，send里的参数为null 事件         onreadystatechange - 监听事件                 当服务器的状体改变时就会触发该事件(readyState) 实现Ajax的异步交互步骤 创建XMLHttpRequest核心对象         固定写法 - 独立编写                 与服务器端建立连接         使用XMLHttpRequest对象的open(method,url)方法                 method - 设置当前请求的类型                 url - 设置当前请求的地址         向服务器端发送请求                 使用XMLHttpRequest对象的send(请求参数)方法                 请求参数的格式 - key=value         接收服务器端的响应数据                 使用XMLHttpRequest对象的onreadystatechange事件,监听服务器端的通信状态                 使用XMLHttpRequest对象的readyState属性,判断服务器端的当前状态(0-4)                 使用XMLHttpRequest对象的status属性,判断服务器端的状态码(200)                 使用XMLHttpRequest对象的responseText属性,接收服务器端的响应数据<ol><li>var xhr=getXhr(); //调用创建XMLHttpRequset对象函数 </li><li>xhr.open('post','05.php'); </li><li>xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded') </li><li>xhr.send('state=2&provcince='+provinceEle.value); </li><li>xhr.onreadystatechange=function(){ </li><li>        if(xhr.readyState==4&&xhr.status==200){ </li><li>                var data=xhr.responseText; </li><li>                console.log(data); </li><li>        } </li><li>} </li></ol>复制代码</td></tr></tbody></table>

关于我们

法律声明

帮助中心

商务合作

相关文章

关于我们

法律声明

帮助中心

商务合作