JS实现的ajax和同源策略(实例讲解)(6)

日期：2020-05-11 栏目：程序人生浏览：次

JS实现ajax小结

创建XMLHttpRequest对象；
  调用open()方法打开与服务器的连接；
  调用send()方法发送请求；
  为XMLHttpRequest对象指定onreadystatechange事件函数，这个函数会在

  XMLHttpRequest的1、2、3、4，四种状态时被调用；

  XMLHttpRequest对象的5种状态，通常我们只关心4状态。

  XMLHttpRequest对象的status属性表示服务器状态码，它只有在readyState为4时才能获取到。

  XMLHttpRequest对象的responseText属性表示服务器响应内容，它只有在
  readyState为4时才能获取到！

总结：

- 如果"Content-Type"="application/json"，发送的数据是对象形式的{},需要在body里面取数据，然后反序列化
= 如果"Content-Type"="application/x-www-form-urlencoded"，发送的是/index/?name=haiyan&agee=20这样的数据，
 如果是POST请求需要在POST里取数据，如果是GET，在GET里面取数据

实例（用户名是否已被注册）

7.1　功能介绍

在注册表单中，当用户填写了用户名后，把光标移开后，会自动向服务器发送异步请求。服务器返回true或false，返回true表示这个用户名已经被注册过，返回false表示没有注册过。

客户端得到服务器返回的结果后，确定是否在用户名文本框后显示“用户名已被注册”的错误信息！

7.2　案例分析

页面中给出注册表单；

在username表单字段中添加onblur事件，调用send()方法；

send()方法获取username表单字段的内容，向服务器发送异步请求，参数为username；

django 的视图函数：获取username参数，判断是否为“yuan”，如果是响应true，否则响应false

参考代码：

<script type="text/javascript">
    function createXMLHttpRequest() {
      try {
        return new XMLHttpRequest();
      } catch (e) {
        try {
          return new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          return new ActiveXObject("Microsoft.XMLHTTP");
        }
      }
    }

    function send() {
      var xmlHttp = createXMLHttpRequest();
      xmlHttp.onreadystatechange = function() {
        if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          if(xmlHttp.responseText == "true") {
            document.getElementById("error").innerText = "用户名已被注册！";
            document.getElementById("error").textContent = "用户名已被注册！";
          } else {
            document.getElementById("error").innerText = "";
            document.getElementById("error").textContent = "";
          }
        }
      };
      xmlHttp.open("POST", "/ajax_check/", true, "json");
      xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      var username = document.getElementById("username").value;
      xmlHttp.send("username=" + username);
    }
</script>

//--------------------------------------------------index.html

<h1>注册</h1>
<form action="" method="post">
用户名：<input id="username" type="text" name="username" onblur="send()"/><span id="error"></span><br/>
密　码：<input type="text" name="password"/><br/>
<input type="submit" value="注册"/>
</form>


//--------------------------------------------------views.py
from django.views.decorators.csrf import csrf_exempt

def login(request):
  print('hello ajax')
  return render(request,'index.html')
  # return HttpResponse('helloyuanhao')

@csrf_exempt
def ajax_check(request):
  print('ok')

  username=request.POST.get('username',None)
  if username=='yuan':
    return HttpResponse('true')
  return HttpResponse('false')

转载注明出处：http://www.heiqu.com/1125.html

JS实现的ajax和同源策略(实例讲解)(6)

相关推荐