Ajax发送请求

1,什么是ajax?

  Asynchronous JavaScript and XML(当然现在xml已经由json代替);

  主要是用于前后台的交互(表单提交已经被废弃);

  使用场景:前台获取数据、表单的失焦验证;



2,如何在有服务的环境下使用ajax发送请求

  1.创建ajax对象-xmlhttprequest对象:(分为两种类型)

    在新版本的浏览器中:variable=new XMLHttpRequest();

    老版本的IE中:variable=new ActiveXObject("Microsoft.XMLHTTP");

    所以在这里我们需要考虑到兼容性的问题: 

     var xhr;
        if(window.XMLHttpRequest){    //常规,如果有,直接使用
            xhr = new XMLHttpRequest();
        }else{   //如果没有,老版本IE
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        console.log(xhr)
        console.log("状态码:" + xhr.readyState);
        console.log(‘响应码:‘ + xhr.status);
        console.log(‘响应文本:‘ + xhr.responseText);
        console.log(‘步骤一完成‘)

  

  2.通过监听ajax的状态的改变来监听:

xhr.onreadystatechange = function(){
            console.log(‘xhr的状态码发生了改变‘);
            console.log("状态码:" + xhr.readyState);
            console.log(‘响应码:‘ + xhr.status);
            console.log(‘响应文本:‘ + xhr.responseText);
            console.log(‘\n‘);
        }
console.log(‘步骤二完成‘)

  3.创建请求的消息,连接服务器

xhr.open(‘GET‘,‘07.php‘,true);    //最后一个参数是bool,表示同步||异步,true异步
console.log(‘步骤三完成‘)

  4.发送

xhr.send(null);   //如果是post请求,就放post参数,如果是get请求,发送null就行了 

 

  5.附:

    状态码:

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

响应码:
1xx 信息类
2xx 成功 200
3xx 重定向 304
4xx 客户端错误 404
5xx 服务端错误



3,使用ajax发送get请求

html部分:

用户名:<input type="text" id="username">
       <span id="ts"></span><br>
密码:<input type="text">
    <button id="btn">验证用户名</button>

原生js部分:

<script>
        var username = document.getElementById("username");
        var btn = document.getElementById("btn");
        var ts= document.getElementById("ts");

        // 点击btn发送ajax请求
        btn.onclick = function(){
            // 1.创建xhr
            var xhr;
            if(window.XMLHttpRequest){    //常规,如果有,直接使用
                xhr = new XMLHttpRequest();
            }else{   //如果没有,老版本IE
                xhr = new ActiveXObject("Microsoft.XMLHTTP");
            }
            // 2.绑定监听函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status == 200){
                        console.log(xhr.responseText)
                        if(xhr.responseText == 1){
                            ts.innerHTML = "该用户名已经被注册"
                        }else if(xhr.responseText == 0){
                            ts.innerHTML = "该用户名可以使用"
                        }

                    }
                }
            }
            // 3.建立连接
            xhr.open("GET","08.php?uname=" + username.value,true);
            // 正则验证
            // 4.发送请求
            xhr.send(null)
        }

        //get是直接可以在地址栏中调试
    </script>


4,使用ajax发送post请求

html:

学生姓名:<input type="text" id="uname"><br>
学生成绩:<input type="text" id="score"><br>
<button id="btn">注册</button>
<p id="p01"></p>

原生js部分:

<script>
        function get_id(id){
            return document.getElementById(id);
        }

        var uname = get_id("uname");
        var score = get_id("score");
        var btn = get_id("btn");
        var p01 = get_id("p01");

        var reg_name = /^[a-z]{3,10}$/g;
        var reg_score = /^\d{1,2}$/g;
        var uname_flag = false;

        uname.onfocus = function(){
            reg_name.lastIndex = 0;
            this.style.border = ‘1px solid #000‘
            uname_flag = false;
        }
        uname.onblur = function(){ 

            if(reg_name.test(uname.value)){
                this.style.border = ‘1px solid #0f0‘;
                uname_flag = true;
            }else {
                this.style.border = ‘1px solid #f00‘
            }
        }

        btn.onclick = function(){
            if(uname_flag){
                // 1.
                var xhr;
                if(window.XMLHttpRequest){    //常规,如果有,直接使用
                    xhr = new XMLHttpRequest();
                }else{   //如果没有,老版本IE
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");
                }
                // 2.
                xhr.onreadystatechange = function(){
                    if(xhr.readyState == 4){
                        if (xhr.status == 200) {
                            console.log(xhr.responseText);
                            p01.innerHTML = xhr.responseText;
                        }
                    }
                }
                // 3.
                xhr.open(‘POST‘,‘http://localhost:8888/0220ajax/09.php‘,true);
                // 3.5  在发送post请求的时候,你得告诉服务器你发送的是一个什么
                xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                // 4.发送
                xhr.send(‘strName=‘ + uname.value + ‘&strScore=‘ + score.value);

            }
        }
    </script>


5,使用jQuery—ajax发送get请求

用户名:<input type="text" id="username">
      <span id="ts"></span>
      <br>
密码: <input type="text">
      <button id="btn">验证用户名</button>
$("#btn").click(function(){
            $.ajax({
                type : "GET",
                url : "01.php?uname=" + $("#username").val(),
                success : function(data){   //就是原生的xhr.responseText
                    console.log(data);
                    if(data == 0){
                        $("#ts").html("该用户名可以使用").css("color","green");
                    }else if(data == 1){
                        $("#ts").html("该用户名已被占用").css("color","red");
                    }
                },
                error : function(err){    //错误的
                    console.log(err)
                }
            })
})


6,使用jQuery—ajax发送post请求

(html部分与上面相同相同)

$("#btn").click(function(){
            $.ajax({
                type : "POST",
                url : "http://192.168.9.154:8888/0221ajax/01.php",
                data : {
                    uname : $("#username").val()
                },
                success : function(data){   //就是原生的xhr.responseText
                    console.log(data);
                    if(data == 0){
                        $("#ts").html("该用户名可以使用").css("color","green");
                    }else if(data == 1){
                        $("#ts").html("该用户名已被占用").css("color","red");
                    }
                },
                error : function(err){    //错误的
                    console.log(err)
                }
            })
})

原文地址:https://www.cnblogs.com/1234wu/p/10414973.html

时间: 2024-11-05 20:41:13

Ajax发送请求的相关文章

ajax对象。同步与异步及ajax发送请求

ajax对象的属性.方法 属性 readyState: Ajax状态码 * 0:表示对象已建立,但未初始化,只是 new 成功获取了对象,但是未调用open方法 1:表示对象已初始化,但未发送,调用了open方法,但是未调用send方法 2:已调用send方法进行请求 3:正在接收数据(接收到一部分),客户端已经接收到了一部分返回的数据 4:接收完成,客户端已经接收到了所有数据 * status :http响应状态码 200代表成功获取服务器端数据 404未找到页面等等…… statusText

ajax 发送请求遇到的问题

1.Illegal invocation 处理方法: 红色字体标注的部分~ var formData = new FormData(); formData.append('imgs',"upload/fruit/284333BDBEFB481BB27C8E84FB7C0D82.jpg"); formData.append('reason',$('textarea').text()); $.ajax({ type : "post", url : "/api/

封装原生Ajax发送请求

(function(window){ function AjaxTool(){} AjaxTool.ajaxRequest = function(params,successCallBack,errCallBack){ /* 获取传入的参数 */ //请求的类型 let requestType = params['requestType'] || 'get'; //请求的路径 let url = params['url']; //传入的数据 let paramObj = params['para

30_Django中关于使用ajax发送请求中`csrf_token`的问题和解决

目录 Django中关于csrf_token的问题和解决 1. 在form表单中加上{% csrf_token %} 2. 使用装饰器的方法,可以不用在form表单中添加上{% csrf_token %} 了 3. 使用中间件,为每个请求都获取到token (使用这个方法,所有的表单都不需要在form标签中添加上{% csrf_token %} 了) Django中关于csrf_token的问题和解决 在需要发送POST请求的html文件中引入下面的js代码, 我为其命名为get_csrf_to

Ajax发送GET和POST请求案例

通常情况下,GET请求用于从服务器上获取数据,POST请求用于服务器发送数据. 采用GET请求将父菜单的ID作为参数发送,下面是服务器的响应页面,此处并未让服务器响应页面从数据库读取--后台数据库访问可仿照传统java EE框架.服务器响应页面的代码如下. 程序清单:Ajax02request/get/second.jsp <%@ page contentType="text/html; charset=UTF-8" language="java" %>

AJAX向服务器发送请求并返回json数据

这里想实现的功能大概是这样:类似注册时,用户名已经被注册了的情况.当用户失去焦点的时候利用AJAX发送请求到服务器端,服务器端进行数据库查询,如果有相同的用户名则页面提示用户名已被注册了,不能用,否则就通过注册. 这里用的是Jquery AJAX以及SSH框架,下面是我的实现步骤: 先引入struts-json的jar包 1.注册页面中添加JS方法调用 <span id="tip" style="color:red"></span> <

解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式

众所周知前端向后台发送 post 请求时,必须验证 csrf,否则会报错 403 Forbidden.使用 Django Form 表单可以直接在表单里面添加 {% csrf_token %} 即可,要是通过 Ajax 发送请求又该怎么办?下面提供三种解决办法: <ul id="ddd"> <li>1</li> <li>2</li> <li>3</li> </ul> <button i

服务器推Comet长轮询的方式与普通AJAX不断请求的方式的区别

当我们想要在浏览器实时显示某些数据,如何实现? 实现的方式有多种,最简单的既是设置一个间隔,AJAX不断发送请求,这种方式最明显的缺陷不管有没有新数据都会一直发送请求,而且这个间隔如果设置的长,及时性太差,如果间隔设置的短,每个客户端都在不断发送大量请求,影响服务器性能 还有一种是利用服务器推的技术,基于长轮询的方式,如图所示: 一开始会觉得,这个也是在不断的请求服务器端,和普通AJAX不断请求有什么区别?这是还未了解长轮询的流程.深入研究了下,发现区别很大 长轮询大致流程为: 客户端通过AJA

前端向后台发送请求有几种方式?

1. link标签的href属性 2. script标签的src属性 3. img标签的src属性 4. ajax发送请求 5. 表单提交发送请求 6. a标签的href发送请求 7. iframe的src属性发送请求