小言_互联网的博客

对AJAX的浅薄的理解

380人阅读  评论(0)

AJAX(Asynchronous Javascript and XML)异步的javascript和XML
首先,它不是一种编程语言,是可以在不加载整个页面的情况下局部更新的一种技术
核心是XMLHttpRequest
通过XMLHttpRequest和web浏览器进行数据的交互和异步,然后通过javascript操作dom,实现动态的局部刷新
1、创建一个XMLHttpRequest对象
var request;
//做兼容型处理,主要处理ie6以下
if(window.XMLHttpRequest){
request=new XMLHttpRequest()
}
else{
request=new ActiveObject(“Microsoft XMLHTTP”)
}
2、XMLHttpRequest发送请求
请求的方式有两种:GET POST
前者可以用来查询,后者可以用来修改添加数据到后台等
open(method,url,async)发送请求的方法,请求的地址,异步
send(String)
3、XMLHttpRequest获取响应
(1)reponseText 获得响应的数据
(2)status 获取http状态码
常见的状态码
1** 接收到请求,正在处理
2** 代表成功
3** 重定向
4** 客户端出现错误
5** 服务器端出现错误
(3)readyState
0:表示请求初始化
1:服务器建立连接
2:请求已经接受
3:正在处理中
4:响应完成
4、页面监听
request.onreadyStatechange=function(){
if(request.readyState=4&&request.status=200){
//做你想做的事情
}
}
5、客户端的实现
通过javascript操作dom,实现动态的局部刷新

采用jquery实现

//GET请求
        $(document).ready(function(){
            $("#search").click(function(){
                $.ajax({
                    type:"GET",
                    url:"sever.php?number="+$("#input").val(),
                    dataType:"json",
                    success:function(data){
                        if(data.success){
                            //做你想做的事情
                            $("#add1").html(data.msg)
                        }
                        else{
                            $("#add1").html("出现错误"+data.msg)
                        }
                    },
                    error:function(jqXHR){alert("出现错误"+jqXHR.status)}
                })
            })
        })

//post请求
        $(document).ready(function(){
            $("#search").click(function(){
                $.ajax({
                    type:"POST",
                    url:"sever.php",
                    dataType:"json",
                    data:{
                        //以键值对的方式写上你要向服务器传输的参数的值
                        name:$("input1").val(),
                        age:$("input2").val(),
                        class:$("input3").val()
                    },
                    success:function(data){
                        if(data.success){
                            //做你想做的事情
                            $("#add1").html(data.msg)
                        }
                        else{
                            $("#add1").html("出现错误"+data.msg)
                        }
                    },
                    error:function(jqXHR){alert("出现错误"+jqXHR.status)}
                })
            })
        })

json是一种数据格式,与js有着相似的书写格式
例如:
{
“name”:“zhangsan”,
“age”:18;
‘hasgrilfriend":false;
“hascar”:null
}
将对象转为json格式:JSON.stringify(obj)
将json转为对象格式:JSON.parse(JSON.stringify(obj))//小提示,这种方法可以实现对象的深拷贝


转载:https://blog.csdn.net/li1484155613/article/details/101473760
查看评论
* 以上用户言论只代表其个人观点,不代表本网站的观点或立场