AJAX

作者: 木子木同 | 来源:发表于2018-10-04 16:57 被阅读0次

AJAX(async JavaScript and XML)
request 请求
response 响应

优点:

1.节省用户操作时间,提高用户体验,减少数据请求
2.传输获取数据

完整AJAX基础过程

步骤:

1.创建ajax对象
2.调用open( )方法,启动发送请求
3.调用send( )方法,发送请求
4.等待服务器,返回内容
var xhr;
if (window.XMLHttpRequest) {
xhr=new XMLHttpRequest();
// IE7+, Firefox, Chrome, Opera, Safari
}
else {
xhr=new ActiveXObject("Microsoft.XMLHTTP");
// IE6, IE5
}

等待服务器返回内容

存有XMLHttpRequest的状态,从0~4
0:请求未初始化
1:服务器连接已建立
2:请求已接收
3:请求处理中
4:请求已完成,且相应已就绪

        function ajax(obj){
            //创建ajax对象
            var xhr
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest()
            }else{
                xhr=new ActiveXObject("Microsoft.XMLHTTP")
            }
            //打开请求
            xhr.open(obj.type,obj.url,obj.async)
            //判断请求方式get/post,发送数据
            if(obj.type.toLowerCase()=="get"){
                xhr.send()
            }else if(obj.type.toLowerCase()=="post"){
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
                xhr.send(toUrl(obj.data))//name=1&name2=2
            }
            
            //操作返回的数据
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4 && xhr.status==200){
                    //对responseText进行json转化
                    var data=JSON.parse(xhr.responseText)
                    //把转化好的数据当做参数返回给obj.success函数
                    obj.success(data)
                }
            }
            
            //对obj.data进行转化,把对象转化成url形式
            function toUrl(obj){
                var arr=[]
                for(var i in obj){
                    arr.push(i+"="+obj[i])
                }
                return arr.join("&")
            }
        }

相关文章

  • AJAX

    主要内容: ajax 是什么、原生ajax 写法和jQuery ajax写法。 AJAX 是什么 ajax,即As...

  • JavaScript进阶知识点--AJAX及JSON

    AJAX 关于 AJAX 什么是 AJAX AJAX 的全称是 Asynchronous JavaScript a...

  • HTML5权威指南 | 第五部分 高级功能

    三十二、使用AJAX(上) Ajax起步: 使用Ajax事件: Ajax请求的错误处理: 中止Ajax请求: 三十...

  • ajax学习笔记

    Ajax学习笔记 Ajax简介 1. Ajax是什么? Ajax : Asynochronous javascri...

  • AJAX

    一、简介 AJAX菜鸟教程 什么是 AJAX ? AJAX = 异步 JavaScript 和 XML。 AJAX...

  • js之AJAX复习

    异步交互和同步交互 什么是Ajax? Ajax的工作原理。 Ajax包含的技术: Ajax的缺陷: Ajax的核心...

  • 复习jQuery - ajax

    jQuery ajax - ajax() 方法 $.ajax({ url:'oo.php', ...

  • jQuery中Ajax请求的使用和四个步骤示例

    ajax() 方法用于执行 AJAX(异步 HTTP)请求,所有的 jQuery AJAX 方法都使用 ajax(...

  • ajax

    1、什么是ajax? 2、ajax的原理 3、ajax的核心对象 4、ajax的优点: ajax的缺点: 被jqu...

  • ajax

    Ajax 1 - 请求纯文本 Ajax 2 - 请求JSON数据 Ajax 3 - 请求Github接口 Ajax...

网友评论

      本文标题:AJAX

      本文链接:https://www.haomeiwen.com/subject/kyktaftx.html