send()Ajax前端相关的技术点html 主要用来实现页(3)

将数组和对象转换为字符串的方法 — json_encode();

将字符串转换为对象的方式 — json_decod();

接口说白了就是后台返回特定格式数据, 而不是一个完整的页面, 就是从后台到前台返回一些数据;

open();

xhr.open("get","nemo.php?username="+uname+"&password="+pwd,true);

调用open方法并不会真正发送请求, 而是启动一个请求以备发送.

它接受三个参数:

参数一: 请求方式(get获取数据, post提交数据);

参数二: 请求地址;

参数三: 同步或者异步标识位, 默认是 true, true表示异步, false 表示同步;

注意： 如果是get请求， 那么请求参数必须在url中传递， 那么就用encodeURI（） 进行编码，防止乱码。send()

send();

如果要发送请求， 用send()方法。

要发送特定的请求，需要调用send（）方法。它接收一个参数，即要作为请求主体发送的数据。

get请求，则必须传入null。post请求传入字符串。

get请求是只有头部，没有主体的，而post请求有请求主体。

**注意：**post请求参数通过send传递，不需要通过encodeURI()转码,但是必须需要设置请求参数.

1. 标准: xhr = new XMLHttprequest();
2. IE6: xhr = newActiveXObject('Microsoft.XMLHTTP");

xhr 对象有一个重要的属性, 就是 readyState 属性,表示”就绪状态”, 就是 xhr.readyState。

readyState 取值有5种值： 0、1、2、3、4

 0  -----  未初始化。
 1  -----  XMLHttpRequest对象正在加载。
 2  -----  xmlHttp对象加载完毕。
 3  -----  正在传输数据。
 4  -----  全部完成。

只要 readyState改变后，就会触发一个事件 onreadystatechange 事件.

    xhr.onreadyStatechange = function(){};

Ajax-但用senp方法发出HTTP请求之后,判断ceadyState得到的时候,就会有一个属性xhr.status表示的是请求的文件的状态码.

1. 1**  -----   消息.
2. 200  -----   代码请求成功.
3. 3**  -----   重定向.
4. 404  -----   请求错误.
5. 500  -----   服务器错误.
6. 6**  -----   其他.

HTML

<script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var uname = document.getElementById('username').value;
            var pw = document.getElementById('password').value;
            // 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();//标准
            }else{
                xhr = new ActiveXObject("Microsoft");//IE6
            }
            // 2、准备发送
            /*
                参数一：请求方式（get获取数据；post提交数据）
                参数二：请求地址
                参数三：同步或者异步标志位，默认是true表示异步，false表示同步            
                post请求参数通过send传递，不需要通过encodeURI()转码
                必须设置请求头信息
            */
            var param = 'username='+uname+'&password='+pw;
            ------------------------------------------------
            get方法:
            xhr.open('get','03get.php?'+encodeURI(param),true); 
            // 3、执行发送动作                                 
            xhr.send(null);//get请求这里需要添加null参数  
            ------------------------------------------------
            post方法:
            xhr.open('post','04post.php',false);
            // 3、执行发送动作
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            xhr.send(param);//post请求参数在这里传递，并且不需要转码
            ------------------------------------------------
            // 4、指定回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        var data = xhr.responseText;
                        var info = document.getElementById('info');
                    if(data == '1'){
                        info.innerHTML = '登录成功';
                    }else if(data == '2'){
                        info.innerHTML = '用户名或者密码错误';
                    }
                }
            }
        }
    }
</script>

<body>
    <form>
        用户名：<input type="text" name="username" id="username">
        <span id="info"></span>
        <br> 
        密码：<input type="text" name="password" id="password">
        <input type="button" value="登录" id="btn">
    </form>
</body>

本文来自电脑杂谈，转载请注明本文网址：
https://www.pc-fly.com/a/jisuanjixue/article-63173-3.html