原生js实现ajax与jquery的ajax库，及json

这是一篇笔记博客，

Ajax:

和服务器进行数据交换（异步）

用js实现复杂的原理：用于发送请求的对象在不同的浏览器中是不同的

同源策略：ajax发送请求的url地址与服务器地址必须是同一域名，协议，端口下

在ajax中常用的一些函数：

open（method，url，async）第三个参数的默认值为true，一般不填写：

send（string）：将请求发送到服务器端，post请求填写参数

request.open(“get”,”get.php”,true);request.send()

request.open(“post”,”post.php”,true); request.send()

request.open(“post”,”create.php”,true);

request.setRequestHeader(“Contend-type”,”application/x-www=form-urlencoded”);

request.send(“name=王二狗&sex=男”)；

responseText：获得字符串形式的响应数据

responseXML：获得XML形式的响应数据（比较少）

status和statusText：以数字和文本形式返回HTTP状态码

getAllResponseHeader（）：获取所有响应暴投

getResponseHeader（）：查询响应中的某个字段的值

readystate属性：

0:请求未初始化，open还没有调用

1:服务器连接已建立，open已经调用了

2:请求已接受，也就是接收到了头信息

3:请求处理中，也就是接收到响应主体了

4:请求已完成，且响应已就绪，就是响应完成了

xmlhttprequest取得响应：

var reques=new XMLHttpRequest();

request.open("GET","get.php",true);

request.send():

request.onreadystatechange=function(){

if(request.readystate==4&&request.status==200){

//成功之后的函数

}

原生js的ajax，get方法：
var request=new XMLHttpRequest();
    request.open('GET','service.php?number='+document.getElementById('keyWord').value);
    request.send();
    request.onreadystatechange=function(){
        if(request.readyState==4&&request.status==200){
            document.getElementById('searchResult').innerHTML;
        }else{
            alert('error!'+request.status);
        }
    }

ajax的post方法：
 var request=new XMLHttpRequest();
    request.open('POST','service.php');
    var data='name='+document.getElementById('staffName').value
    +"&number="+document.getElementById('staffNumber').value
    +"&sex="+document.getElementById('staffSex').value
    +"&job="+document.getElementById('staffJob').value;
    request.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    request.send(data);
    request.onreadystatechange=function(){
        if(request.readyState==4&&request.status==200){
            document.getElementById('createResult').innerHTML;
        }else{
            alert('error!'+request.status);
        }
    }
    }

上述是不含json的ajax，现在实际操作中基本都是使用json，故什么是json

Json:javascript对象表示法

Json是存储和交换文本信息的语法，类似于XML（长度短小，读写速度更快），它采用键值对的方式来组织，易于人们阅读和编写，同时也易于机器解析和生成

Json是独立于语言的，不管什么语言都可以解析json，只需要按照json的规则来

Json可以使用javascript内建的方法直接解析，转换成javascript对象，

Json数据的书写格式是：名称／值对

名称／值对组合中的名称写在前面（在双引号中），值对写在后面（同样在双引号中），中间用冒号隔开，例如：“name”：“rose”

json的值可以是下面这些类型：

数字（整数或者浮点数）

字符串（在双引号中）

逻辑值（true false）

数组（在方括号中）

对象（在花括号中）

null

例如：

{“rose”:[“age”:”10”,”sex”:”girl”] }

get方法
var request= new XMLHttpRequest();
request.open("GET","service.php?number="+document.getElementById("keyword").value);
request.send();
request.onreadystatechange=function(){
    if(request.readyState==4&&request.status==200){
        var data=JSON.parse(request.responseText);
        if(data.success){
            document.getElementById('searchResult').innerHTML=data.msg;//服务器端的字段
        }
        else{
            document.getElementById('searchResult').innerHTML="出现错误："+data.msg;
        } }
            else{
                alert('error:'+request.status)
            }
   
}
post方法
  var request=new XMLHttpRequest;
    request.open("POST","service.php");
   var data='name:'+document.getElementById('staffName').value+
   '&number:'+document.getElementById('staffNumber').value+
   '&sex'+document.getElementById('staffSex').value+
    '&job'+document.getElementById('staffJob').value;
    request.setRequestHeader('content-Type','application/x-www-form-urlencoded');
    request.send(data);
    request.onreadystatechange=function(){
if(request.readyState==4&&request.status==200){
    var data=JSON.parse(request.responseText);
    if(data.success){
        document.getElementById('createResult').innerHTML=data.msg;
    }
    else{
        document.getElementById('createResult').innerHTML="error:"+data.msg;
    }
} else{
                alert('error:'+request.status)
            }
    }

原生js实现ajax与jquery的ajax库，及json

猜你喜欢