欢迎使用CSDN-markdown编辑器

ajax的js原生用法和Jqurey用法
使用步骤：
a. 创建对象：XMLHttpRequest
b. 建立连接
open(method, url, async)
c. 发送请求
send()
d. 处理响应
onreadystatechange 事件
readyState 发生改变时触发该事件执行
readyState 属性
存有 XMLHttpRequest 的状态信息。
也表示的是请求处理到哪个阶段了
4 – 请求处理完毕，响应就绪
status
HTTP 状态码
表示服务器响应状态
200 – OK，成功获取到服务器资源
4xx – 通常是客户端错误
5xx – 通常是服务器端错误
responseText
获取响应文本字符串内容
get和post的区别

get
    -- 会将表单中的数据以?连接到 URL 之后
    -- 传递数据量有限
    -- 对敏感数据不安全
    -- 常用于从服务器获取资源
post
    -- 不会将数据连接到 URL 后
    -- 对敏感数据安全性相对较高
    -- 理论上没有传递大小的限制
    -- 通常向服务器传递敏感数据，或是上传文件资源时，使用 post
    -- 常用于向服务器提交资源

在使用方法上get的数据传送是直接添加在url后面，而post是将传输数据放在send（）里面。
get方式使用

// 此处的代码需要自己用php模拟后台数据使用
<script type="text/javascript">
    document.getElementById("username").onblur = function(){
            // a. 创建核心对象
            var xhr = new XMLHttpRequest();
            // b. 建立连接（打开,get方式向后台传输数据直接在url后面加上值）
    xhr.open("get", "checkusername.php?username=" + this.value, true);
            // c. 发送请求
            xhr.send();
            // d. 处理响应
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 4) { // 请求处理完毕，响应就绪
                    if (xhr.status == 200) { // OK
                        var data = JSON.parse(xhr.responseText);
                        if (data.status == 1) { // 已存在，重新输入
                            document.getElementById("username_info").innerHTML = "用户名已被占用，请重新输入";
                        } else {
                            document.getElementById("username_info").innerHTML = "用户名可用";
                        }
                    }
                }
            }
        }
</script>

post方式使用
// 此处的代码需要自己用php模拟后台数据使用

("#username").onblur = function(){
            // 创建核心对象
            var xhr = new XMLHttpRequest();
            // 打开
            xhr.open("post", "checkusername.php", true);
            // 设置请求头信息
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            // 发送
            xhr.send("username=" + this.value);
            // 处理响应
            xhr.onreadystatechange = function(){
                if (xhr.readyState == 4) {
                    if (xhr.status == 200) {
                        var data = JSON.parse(xhr.responseText);
                        if (data.status == 1) {
                            $("#user_info").innerHTML = "用户名已被占用";
                            usernameErr = true;
                        } else {
                            $("#user_info").innerHTML = "用户名可用";
                            usernameErr = false;
                        }
                    }
                }
            }
        }

简单jqurey用法

$.ajax({
   type: "POST", //获取类型
   url: "some.php", //获取的链接地址
   data: "name=John&location=Boston",//返回给后台的数据
   success: function(msg){//成功后的回调函数
     alert( "Data Saved: " + msg );
   }
});