欢迎使用CSDN-markdown编辑器

来源:互联网 发布:hadoop需要java基础吗 编辑:程序博客网 时间:2024/06/07 03:44

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 );   }});