一步一步理解Ajax(一)

简介: Ajax是Asynchronous Javascript And XML的缩写。作用:通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。

Ajax是Asynchronous Javascript And XML的缩写。
作用:通过Ajax可以使用Javascript语句来调用XMLHttpRequest对象,直接与服务器进行通讯,可以在不重载页面的情况下与服务器交换数据。

1、创建XMLHttpRequest对象
    var xhr =  new XMLHttpRequest()
对于IE早期版本(IE7及以下版本)使用,new ActiveXObject("Microsoft.XMLHTTP")、new ActiveXObject("Msxml2.XMLHTTP")等方式创建对象

2、XMLHttpRequest对象常用属性和常用方法
    属性
    readystate       返回XMLHTTP请求的当前状态码
    state               返回当前请求的HTTP状态码
    statusText       返回HTTP状态码对应的文本

    方法
    onreadystatechange    监听readystate和state状态
    open                          建立连接请求
    send                          发送连接请求

    readystate状态码
    0(未初始化)    对象已建立,但尚未初始化
    1(初始化)       对象已建立,尚未调用send方法
    2(发送数据)    send方法已调用,但是当前的状态码及http头未知
    3(数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误
    4(完成)         数据接收完毕,此时可以通过responseBody和responseText获取完整的回应数据

   state常用状态码
   200            OK                          服务器成功返回网页
   404            Not Found                客户端所有请求的页面不存在
   503            Service Unavailable    服务器响应超时

   open(method,URL,flag,name,password)方法有五个参数
   method参数用于指定使用什么方式向服务器发送HTTP请求,参数可以为get、post、head、put和delete五种
   url指定服务器的URL
   flag参数用于指定提交HTTP请求方方式,true为异步(默认),false为同步
   name提交用户名,可选
   password提交密码,可选

   //  创建XMLHttpRequest对象
   function  createXHR(){
       return window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
   }
   
   function Ajax(){

        var xhr=new createXHR();
        xhr.onreadystatechange=function(){
            if(4==xhr.readystate&&200==state){
                 /*  成功 */
            }
            else{
                /*  异常 */
            }
        }
       xhr.open("get",url,true);
       xhr.send();
   }

 

目录
相关文章
|
缓存 前端开发
一步一步理解Ajax(二)
ajax方法:通过 HTTP 请求加载远程数据get方法: 通过远程 HTTP GET 请求载入信息post方法:通过远程 HTTP POST 请求载入信息1、创建XMLHttpRequest对象 function createXHR() {            return window.
1007 0
|
前端开发 JavaScript 数据格式
一步一步理解Ajax(三)
Ajax一般应用于户表单数据的验证,局部更新,如分页等等Ajax的优点与缺点优点:1、异步处理功能,可以选择性提交数据;2、局部更新;3、较少服务器负担;4、更快的响应速度;5、减轻带宽压力。缺点:1、局部更新不支持后退功能和添加到收藏夹功能;2、搜索引擎不支持Ajax的抓取;3、跨平台性不好;4、并非所有浏览器都支持Ajax;5、浏览器对Ajax的支持程度不同。
968 0
|
前端开发 PHP 容器
ajax的理解
function goe_local(){ //ip同步到服务端    $.ajax({                                           url:'ajax_ip.
699 0
|
12月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
83 0
|
6月前
|
JSON 前端开发 Java
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
利用Spring Boot处理JSON数据实战(包括jQuery,html,ajax)附源码 超详细
132 0
|
6月前
|
敏捷开发 JavaScript 前端开发
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
❤❤❤【Vue.js最新版】sd.js基于jQuery Ajax最新原生完整版for凯哥API版本❤❤❤
|
6月前
|
前端开发 JavaScript
Jquery ajax捕获错误信息
Jquery ajax捕获错误信息
52 0
|
6月前
|
JSON 缓存 前端开发
Jquery中AJAX的应用
Jquery中AJAX的应用
75 0
|
6月前
|
JSON 前端开发 JavaScript
jQuery中ajax的使用
jQuery中ajax的使用
|
6月前
|
XML JavaScript 前端开发
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
【Web智能聊天客服】之JavaScript、jQuery、AJAX讲解及实例(超详细必看 附源码)
88 0