4 Steps to teach you how Ajax

Source: Internet
Author: User
Ajax, "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), refers to a web development technique that creates interactive Web applications.

AJAX = Asynchronous JavaScript and XML (a subset of standard generic markup languages).

AJAX is a technique for creating fast, Dynamic Web pages.

AJAX is a technique that can update parts of a Web page without reloading the entire page. [1]

AJAX enables Web pages to be updated asynchronously by exchanging small amounts of data in the background with the server. This means that you can update a part of a webpage without reloading the entire page.

Traditional Web pages (without AJAX) if you need to update the content, you must reload the entire page page.

This article focuses on the use of AJAX-related knowledge.

Ajax as asynchronous transmission, local refresh is very convenient, very useful!

First, there are 4 steps to using Ajax:

1. Creating an Ajax Object

var xmlHttp = new XMLHttpRequest();

2. Establish a connection (' submission method ', ' URL ')

xmlHttp.open('get','./AJAX_XML.xml');

3. Determine Ajax readiness status and status code

Xmlhttp.onreadystatechange = function () {    if (xmlhttp.readystate==4 && xmlhttp.status==200) {  }}

4. Sending the request

xmlHttp.send(null); //get方式参数为null,post方式,参数为提交的参数

The following is the asynchronous submission of the user name (after entering the user name, the asynchronous submission of background judgment, the foreground immediately prompts whether to register, do not have to judge when submitting!) )

Get mode Commit

Xx.html

<script type= "Text/javascript" >window.onload=function () {  document.getElementById (' username '). onblur= function () {    var Name=document.getelementbyid (' username '). value;    var req=new xmlhttprequest ();    Req.open (' Get ', ' 4-demo.php?name= ' +name);    Req.onreadystatechange=function () {      if (req.readystate==4 && req.status==200) {        alert ( Req.responsetext);      }    }    Req.send (null);  If there is no data in the Send () method, write null  }}</script>

User name:<input type="text" name="" id="username">

xx.php

<?phpprint_r ($_get);? >

1. IE does not support Chinese

2, =, & is confused with the keyword of the requested string.

Post Submission

Xx.html

<script type= "Text/javascript" >window.onload=function () {  document.getElementById (' username '). onblur= function () {    var Name=document.getelementbyid (' username '). value;    Name=encodeuricomponent (name);    var req=new xmlhttprequest ();    Req.open (' Post ', ' 5-demo.php?age= ' +20);    Req.onreadystatechange=function () {      if (req.readystate==4 && req.status==200) {        alert ( Req.responsetext);      }    }  Req.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');    Req.send (' name= ' +name);}    } </script>

User name:<input type="text" name="" id="username">

xx.php

<?phpprint_r ($_post);p rint_r ($_get);? >

1. Send data via Send ()

2. setRequestHeader () must be set to convert the passed parameters into XML format

3, post submission can be directly submitted in Chinese, do not need to transcode

4. The characters in the POST request will also be confused with the &, = character typeface in the URL, so it is recommended to use encodeURIComponent () encoding

5, at the same time as the post submission, you can make a get commit

Resolves a problem where IE does not support Chinese =, & is confused with the keyword of the requested string

In JS, it is encoded by encodeURIComponent ().

Window.onload=function () {  document.getElementById (' username '). Onblur=function () {    var name= document.getElementById (' username '). value;    Name=encodeuricomponent (name);  Coded    var req=new xmlhttprequest ();    Req.open (' Get ', ' 4-demo.php?name= ' +name);    Req.onreadystatechange=function () {      if (req.readystate==4 && req.status==200) {        alert ( Req.responsetext);      }    }    Req.send (null);  If there is no data in the Send () method, write null  }}

1. Req.responsetext: Gets the returned string

2. Req.responsexml: Gets the returned data by DOM structure

Note Post/get two ways to submit the difference!

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.